“React Progress Circle” Kod odpowiedzi

Postęp okrągły dla React

import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';

const percentage = 66;

<CircularProgressbar
  value={percentage}
  text={`${percentage}%`}
  styles={buildStyles({
    // Rotation of path and trail, in number of turns (0-1)
    rotation: 0.25,

    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
    strokeLinecap: 'butt',

    // Text size
    textSize: '16px',

    // How long animation takes to go from one percentage to another, in seconds
    pathTransitionDuration: 0.5,

    // Can specify path transition in more detail, or remove it entirely
    // pathTransition: 'none',

    // Colors
    pathColor: `rgba(62, 152, 199, ${percentage / 100})`,
    textColor: '#f88',
    trailColor: '#d6d6d6',
    backgroundColor: '#3e98c7',
  })}
/>;
dhiraj subudhi

React Progress Circle

<div style={{ width: 200, height: 200 }}>
  <CircularProgressbar value={66} />
</div>
Enthusiastic Elk

Odpowiedzi podobne do “React Progress Circle”

Pytania podobne do “React Progress Circle”

Więcej pokrewnych odpowiedzi na “React Progress Circle” w JavaScript

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu