@webeach/gl-circular-progress

🇺🇸 English version | 🇷🇺 Русская версия

Beautiful WebGL circular progress bars library (Fire and Liquid effects).

👀 View Demo

💎 Features

• WebGL Rendering. High performance and smooth shader animations.
• Stunning Effects. Ready-to-use presets for Fire and Liquid simulation.
• Fully Customizable. Configure colors, thickness, speed, intensity, and other parameters.
• Lightweight. Zero dependencies, optimized code.
• TypeScript. Full typing out of the box.

📦 Installation

npm install @webeach/gl-circular-progress

or

pnpm install @webeach/gl-circular-progress

or

yarn add @webeach/gl-circular-progress

📥 Usage

import { CircularProgressFire } from '@webeach/gl-circular-progress';

// Find canvas element
const canvas = document.getElementById('my-canvas');

// Initialize progress bar
const instance = new CircularProgressFire(canvas, {
  colors: [0xff5a00, 0xff9a00],
  progress: 0.5, // Initial value
  speed: 1.5,
  thickness: 15,
});

// Don't forget to clean up when removing the component
// instance.destroy();

🛠 Classes and Documentation

The library provides two main classes with different visual effects:

🔥 CircularProgressFire

Circular progress with a dynamic fire effect. Supports configuration of fire intensity and color gradients.

💧 CircularProgressLiquid

Circular progress with a fluid liquid and metaballs effect. Supports "volume" configuration for creating a 3D lens effect.

🧩 Dependencies

The library has Zero external dependencies and is written in native WebGL.

🔖 Releasing

Releases are automated with semantic-release.

Before publishing a new version, make sure that:

• All changes are committed and pushed to main.
• Commit messages follow Conventional Commits:
  • feat: ... — new features
  • fix: ... — bug fixes
  • chore: ..., refactor: ..., etc. — as needed
• The next version (patch, minor, major) is derived automatically from the commit types.

👤 Author

Developed and maintained by Ruslan Martynov.

Have an idea or found a bug? Open an issue or send a pull request.

📄 License

This package is distributed under the MIT License.