024 React Sweet Progress

最新推荐文章于 2025-04-28 14:53:21 发布

Michael18811380328

最新推荐文章于 2025-04-28 14:53:21 发布

阅读量82

点赞数

文章标签： react.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_41697143/article/details/129011870

版权

ReactSweetProgress是一个简洁美观的进度条组件，适用于快速添加到React应用中。提供圆形和线性两种样式，具有200个星星的GitHub认可度和每周9000次的下载量。用户可以通过设置percent、status等属性自定义组件样式，例如显示上传进度。不过，该库在2018年后未再更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

024 React Sweet Progress

用途

react 实现的进度条(UI小组件)

A way to quickly add a react progress bar to your app

可靠性

200个星星

周下载量9000

官网链接

https://www.npmjs.com/package/react-sweet-progress

https://github.com/abraztsov/react-sweet-progress

基本使用

import { Progress } from 'react-sweet-progress';
import "react-sweet-progress/lib/style.css";

<Progress percent={88} status="success" />
<Progress type="circle" percent={100} status="success" />

实际使用

<Progress 
      type="circle" 
      percent={props.uploadPercent} 
      width={30}
      theme={
        {
          default: {
            color: 'rgba(0, 0, 0, 0.6)',
          },
          active: {
            color: '#fff',
          },
          success: {
            symbol: props.tipText,
            color: '#fff',
          }
        }
      }
      style={
        {
          color: '#fff',
          fontSize: '12px',
          transform: 'rotate(-90deg)',
          position: 'absolute',
          zIndex: 1000,
        }
      }
      symbolClassName={'file-upload-span'}
    />

其他

2018年后未更新