React 的自定义循环进度栏 .

演示

安装

npm install @alptugidin/react-circular-progress-bar

或者说

yarn add @alptugidin/react-circular-progress-bar

导入

import {Flat, Heat, Nested} from '@alptugidin/react-circular-progress-bar'

使用量

平调

<Flat  
   progress={50}
   range={{ from: 0, to: 100 }}
   sign={{ value: '%', position: 'end' }}
   text={'Match'}
   showMiniCircle={true}
   showValue={true}
   sx={{
     strokeColor: '#ff0000',
     barWidth: 5, 
     bgStrokeColor: '#ffffff',
     bgColor: { value: '#000000', transparency: '20' },  
     shape: 'full',
     strokeLinecap: 'round',
     valueSize: 13,
     valueWeight: 'bold',
     valueColor: '#000000',
     valueFamily: 'Trebuchet MS',
     textSize: 13,
     textWeight: 'bold',
     textColor: '#000000',
     textFamily: 'Trebuchet MS',
     loadingTime: 1000,
     miniCircleColor: '#ff0000',
     miniCircleSize: 5,
     valueAnimation: true,
     intersectionEnabled: true
   }}
/>

道具

样式

热量

<Heat
  progress={50}
  range ={{ from: 0, to: 100 }}
  sign={{ value: '%', position: 'end' }}
  showValue={true}
  revertBackground={false}
  text={'Match'}
  sx={{
    barWidth: 5,
    bgColor: '#dadada',
    shape: 'half',
    valueSize: 13,
    textSize: 13,
    valueFamily: 'Trebuchet MS',
    textFamily: 'Trebuchet MS',
    valueWeight: 'normal',
    textWeight: 'normal',
    textColor: '#000000',
    valueColor: '#000000',
    loadingTime: 1000,
    strokeLinecap: 'round',
    valueAnimation: true,
    intersectionEnabled: true
  }}
/>

道具

样式

嵌入

<Nested
  circles={[
    {text: 'Javascript', value: 20, color: '#fde047'},
    {text: 'Typescript' ,value: 50, color: '#0ea5e9'},
    {text: 'HTML', value: 8, color: '#c2410c'},
    {text: 'CSS', value: 12, color: '#7c3aed'},
    {text: 'SASS', value: 10, color: '#c026d3'}
  ]}
  sx={{
    bgColor: '#cbd5e1',
    fontWeight: 'bold',
    fontFamily: 'Trebuchet MS',
    strokeLinecap: 'round',
    loadingTime: 1000,
    valueAnimation: true,
    intersectionEnabled: true
  }}
/>

道具

样式

许可证

麻省理工学院 阿尔普图·伊丁