🇺🇸 English version | 🇷🇺 Русская версия
Beautiful WebGL circular progress bars library (Fire and Liquid effects).
- WebGL Rendering. High performance and smooth shader animations.
- Stunning Effects. Ready-to-use presets for
FireandLiquidsimulation. - Fully Customizable. Configure colors, thickness, speed, intensity, and other parameters.
- Lightweight. Zero dependencies, optimized code.
- TypeScript. Full typing out of the box.
npm install @webeach/gl-circular-progressor
pnpm install @webeach/gl-circular-progressor
yarn add @webeach/gl-circular-progressimport { 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();The library provides two main classes with different visual effects:
Circular progress with a dynamic fire effect. Supports configuration of fire intensity and color gradients.
Circular progress with a fluid liquid and metaballs effect. Supports "volume" configuration for creating a 3D lens effect.
The library has Zero external dependencies and is written in native WebGL.
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 featuresfix: ...— bug fixeschore: ...,refactor: ..., etc. — as needed
- The next version (
patch,minor,major) is derived automatically from the commit types.
Developed and maintained by Ruslan Martynov.
Have an idea or found a bug? Open an issue or send a pull request.
This package is distributed under the MIT License.