0.1.0 • Published 5 years ago
react-simple-progress-circle v0.1.0
Simple React Progress Circle
Simple React Progres Circle is a circlular progress bar made into a reusable react component with React Hooks.
Start
npm i react-simple-progress-circle
Example
import React from 'react';
import ProgressCircle from 'react-simple-progress-circle';
<ProgressCircle
size={50} //Height and Width of the circle
clockwise={true} // Determines is the progress should go clockwise or counter clockwise
color={'green'} //Color of the circle stroke
progress={20} //Number between 0 and 100
start={0} // Where the progress circle will start. 0 will start at 90deg clockwise from the top
strokeWidth={20} //width of the circle strokes. Stroke width must be at least half of size
opacity={0.4} //a number between 0 and 1. The background opacity of the color.
time={0.4} //in seconds, for progress transition
timingFunction={'linear'} //linear, ease in, ease-out, east-in-out, step-start, step-end
/>