@webeach/gl-circular-progress-react

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

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

👀 View Demo

💎 Features

• 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 Fire and Liquid simulation.
• Fully Customizable. Configure colors, thickness, speed, intensity via props.
• TypeScript. Full typing out of the box.

📦 Installation

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

or

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

or

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

📥 Usage

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

function App() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <CircularProgressFire
        aria-label="Progress"
        options={{
          colors: [0xff5a00, 0xff9a00],
          progress: 0.5,
          speed: 1.5,
          thickness: 15,
        }}
      />
    </div>
  );
}

🛠 Components and Documentation

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

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

🔖 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.