gradient-progress-circle-bar
Advanced tools
Comparing version
{ | ||
"name": "gradient-progress-circle-bar", | ||
"version": "1.0.3", | ||
"version": "1.0.4", | ||
"description": "A customizable progress circle bar component for React", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -22,15 +22,26 @@ # GradientProgressCircleBar | ||
```bash | ||
<ProgressCircleBar | ||
value={75} | ||
remainingColor="lightgray" | ||
size={150} | ||
strokeWidth={15} | ||
progressColors={["#ff0000", "#00ff00", "#0000ff"]} | ||
innerColor="#f0f0f0" | ||
clockwise={false} | ||
label="75%" | ||
fontSize={20} | ||
fontColor="blue" | ||
fontWeight="bold" | ||
/> | ||
import React from "react"; | ||
import ProgressCircleBar from "gradient-progress-circle-bar"; | ||
const App = () => { | ||
return ( | ||
<div> | ||
<ProgressCircleBar | ||
value={75} | ||
remainingColor="lightgray" | ||
size={150} | ||
strokeWidth={15} | ||
progressColors={["#ff0000", "#00ff00", "#0000ff"]} | ||
innerColor="#f0f0f0" | ||
clockwise={true} | ||
label="75%" | ||
fontSize={20} | ||
fontColor="blue" | ||
fontWeight="bold" | ||
/> | ||
</div> | ||
); | ||
}; | ||
export default App; | ||
``` | ||
@@ -37,0 +48,0 @@ |
9296
2.87%77
16.67%