WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

webeach/gl-circular-progress

Repository files navigation

gl-circular-progress


npm package build npm downloads

🇺🇸 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:

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.


🧩 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:

  1. All changes are committed and pushed to main.
  2. Commit messages follow Conventional Commits:
    • feat: ... — new features
    • fix: ... — bug fixes
    • chore: ..., refactor: ..., etc. — as needed
  3. 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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •