🇺🇸 English version | 🇷🇺 Русская версия
Beautiful WebGL circular progress bars React library (Fire and Liquid effects).
- 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 for
FireandLiquidsimulation. - Fully Customizable. Configure colors, thickness, speed, intensity via props.
- TypeScript. Full typing out of the box.
npm install @webeach/gl-circular-progress-reactor
pnpm install @webeach/gl-circular-progress-reactor
yarn add @webeach/gl-circular-progress-reactimport{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 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.