Author: | cengizbesir |
---|---|
Views Total: | 1,173 views |
Official Page: | Go to website |
Last Update: | September 18, 2022 |
License: | MIT |
Preview:

Description:
ProgressCircle.js is a JavaScript library for generating circular progress (loading) bars using plain JavaScript and CSS. No image, SVG, and canvas required.
How to use it:
1. Insert the progresscircle.css and progresscircle.js into the document.
<script src="assets/js/progresscircle.js"></script> <link rel="stylesheet" href="assets/css/progresscircle.css" />
2. Create a container to hold the circle progress bar.
<div id="example"></div>
3. Create a new instance of the ProgressCircle.js. The second parameter is used to determine whether to work with or without CSS.
var instance = new ProgressCircle("#example", true);
4. Define your progress data in a JS object.
var pData = { text : "64%", percent : 64, lines : [{text:"Line 1"}, {text:"Line 2"}, {text:"Line 3"}], color : "green", textColor: "grey" };
5. Load data from the object you just created and render a circle progress bar on the page.
instance.load(pData);
6. You can also render multiple circle progress bars at a time.
var pData = [ { text : "1. 44%", percent : 44, lines : [{text:"Line 1"}, {text:"Line 2"}], color : "red", textColor: "grey" }, { text : "2. 63%", percent : 63, lines : [{text:"Line 1"}, {text:"Line 2"}], color : "green", textColor: "blue" }, { text : "3. 75%", percent : 75, lines : [{text:"Single Line"}], color : "blue", textColor: "red" }, // ... ];
7. Update the progress data.
instance.change({ text : "90%", percent : 90, lines : [{text:"Line 4"}, {text:"Line 5"}, {text:"Line 6"}], color : "green", textColor: "grey", index: 5, })
Changelog:
v2.0 (09/18/2022)
- Update