波浪进度球 Wave Progress Ball for React

中文 · English

这是一个基于 React，使用<svg>实现的波浪进度球组件。进度球可以自定义颜色、大小、进度、渐变、速度等23种参数。自定义内容详见自定义。

预览

波浪进度球 Demo

安装

使用npm或yarn等包管理器安装后，即可在项目中使用。

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

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

然后在需要处引入即可 (注意需要手动引入样式)：

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

使用

基本用法

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

自定义

快速生成

只需要在波浪进度球 Demo 页面中配置好参数，在“导出设置”选项卡点击复制按钮即可。

示例

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

参数	说明	类型	默认值	必填
value	进度百分比	number	-	true
style	样式	CSSProperties	-	false
className	类名	string	-	false
adaptive	是否自适应大小	boolean	false	false
bgColor	背景颜色	transparent|string	"transparent"	false
size	球的大小	number	350	false
circleColor	圆环的颜色	string	"#bdc3c7"	false
circleLineWidth	圆环线条的宽度	number	1	false
waveHeight	波浪的高度	number	30	false
isWaveGradient	是否启用波浪渐变效果	boolean	true	false
isWaveBgGradient	是否启用背景波浪渐变效果	boolean	true	false
waveColor	波浪的颜色	string	"#43CF73"	false
waveBgColor	背景波浪的颜色	string	"rgba(130,221,95,0.5)"	false
waveGradientColor	波浪渐变色的起始和结束颜色	{ start: string; end: string; }	{start: "#43CF73",end: "#BCEC4F",}	false
waveBgGradientColor	背景波浪渐变色的起始和结束颜色	{ start: string; end: string; }	{start: "rgba(130, 221, 95,0.5)",end: "rgba(130, 221, 97,0.5)",}	false
waveSpeed	波浪的移动速度	number	3	false
waveBgSpeed	背景波浪的移动速度	number	3	false
waveOffsetY	波浪的垂直偏移量	number	0	false
waveBgOffsetY	背景波浪的垂直偏移量	number	0	false
waveBgOffsetX	背景波浪的水平偏移量	number	1	false
showWaveBg	是否显示背景波浪	boolean	true	false
reverseWave	是否反转波浪	boolean	false	false
reverseWaveBg	是否反转背景波浪	boolean	false	false

更新日志

更新日志