README-EN.md

Wave Progress Ball for React

中文 · English

This is a React component that uses <svg> to create a wave progress ball. The progress ball can be customized in terms of color, size, progress, gradient, speed, and other 23 kinds of properties. Custom content is detailed in Customization.

Preview

Demo of Wave Progress Ball

Install

After installing the package with npm or yarn, you can use it in your project.

$ npm i react-wave-progress-ball-svg

$ yarn add react-wave-progress-ball-svg

And then import it in your project (Css file should be imported manually):

import WaveBall from "react-wave-progress-ball-svg";
import "react-wave-progress-ball-svg/dist/style.css";

Usage

Basic Usage

const [value, setValue] = useState(50);
return <WaveBall value={value} />;

Customization

Setting Generator

Simply open the Demo Page, and copy the settings from "Output".

Example

import WaveBall from "react-wave-progress-ball-svg";
import "react-wave-progress-ball-svg/dist/style.css";

export function ExampleBall() {
    const [value, setValue] = useState(50);
    const settings = {
        size: 350,
        adaptive: false,
        circleColor: "#bdc3c7",
        circleLineWidth: 1,
        waveHeight: 30,
        isWaveGradient: true,
        isWaveBgGradient: true,
        waveColor: "#43CF73",
        waveBgColor: "rgba(130, 221, 95,0.5)",
        waveGradientColor: {
            start: "#43CF73",
            end: "#BCEC4F",
        },
        waveBgGradientColor: {
            start: "rgba(130, 221, 95,0.5)",
            end: "rgba(130, 221, 97,0.5)",
        },
        waveSpeed: 3,
        waveBgSpeed: 3,
        waveOffsetY: 0,
        waveBgOffsetY: 0,
        waveBgOffsetX: 1,
        showWaveBg: true,
        reverseWave: false,
        reverseWaveBg: false,
    };
    return (
        <>
            <WaveBall value={value} {...settings} />
        </>
    );
}

Props

Property	Description	Type	Default Value	is required
value	To set the completion percentage	number	-	true
style	style of the svg tag	CSSProperties	-	false
className	className of the svg tag	string	-	false
adaptive	Whether to adapt to size	boolean	false	false
bgColor	Background color	transparent|string	"transparent"	false
size	Size of the ball	number	350	false
circleColor	Color of the circle outline	string	"#bdc3c7"	false
circleLineWidth	Width of the circle outline	number	1	false
waveHeight	Height of the wave	number	30	false
isWaveGradient	Whether to enable foreground wave gradient effect	boolean	true	false
isWaveBgGradient	Whether to enable background wave gradient effect	boolean	true	false
waveColor	Color of the foreground wave	string	"#43CF73"	false
waveBgColor	Color of the background wave	string	"rgba(130,221,95,0.5)"	false
waveGradientColor	Start and end colors of the foreground wave gradient	{ start: string; end: string; }	{start: "#43CF73",end: "#BCEC4F",}	false
waveBgGradientColor	Start and end colors of the background wave gradient	{ start: string; end: string; }	{start: "rgba(130, 221, 95,0.5)",end: "rgba(130, 221, 97,0.5)",}	false
waveSpeed	Speed of the foreground wave movement	number	3	false
waveBgSpeed	Speed of the background wave movement	number	3	false
waveOffsetY	Vertical offset of the foreground wave	number	0	false
waveBgOffsetY	Vertical offset of the background wave	number	0	false
waveBgOffsetX	Horizontal offset of the background wave	number	1	false
showWaveBg	Whether to show the background wave	boolean	true	false
reverseWave	Whether to reverse the wave	boolean	false	false
reverseWaveBg	Whether to reverse the background wave	boolean	false	false

Changelog

Changelog (Chinese)