Simple Plain Circle Progress Bar Library – ProgressCircle.js

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