Repository files navigation

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

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

👀 View Demo

• React Components. Ready-to-use components for easy integration.
• WebGL Rendering. High performance and smooth shader animations powered by@webeach/gl-circular-progress.
• Stunning Effects. Presets forFire andLiquid simulation.
• Fully Customizable. Configure colors, thickness, speed, intensity via props.
• TypeScript. Full typing out of the box.

npm install @webeach/gl-circular-progress-react

or

pnpm install @webeach/gl-circular-progress-react

or

yarn add @webeach/gl-circular-progress-react

import{CircularProgressFire}from'@webeach/gl-circular-progress-react';functionApp(){return(<divstyle={{width:200,height:200}}><CircularProgressFirearia-label="Progress"options={{colors:[0xff5a00,0xff9a00],progress:0.5,speed:1.5,thickness:15,}}/></div>);}

The library provides two main components 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.

This library wraps@webeach/gl-circular-progress and uses@webeach/react-hooks for efficient WebGL resource management.

Releases are automated withsemantic-release.

Before publishing a new version, make sure that:

1. All changes are committed and pushed tomain.
2. Commit messages followConventional 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.

Developed and maintained byRuslan Martynov.

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

This package is distributed under theMIT License.