Visualize Progress Data With Animated, Circular Progress Bars – ProgressJS

Category: Javascript , Loading | April 15, 2024
Author:fkde
Views Total:160 views
Official Page:Go to website
Last Update:April 15, 2024
License:MIT

Preview:

Visualize Progress Data With Animated, Circular Progress Bars – ProgressJS

Description:

ProgressJS is a progress bar JavaScript library that helps you create customizable, animated, circular progress bars on your web apps.

It’s ideal for visualizing loading progress, task completion, or any other type of data that can be represented as a percentage.

How to use it:

1. Download the package and load the main script progress.js on your HTML page.

<script src="/build/progress.min.js"></script>

2. Create an empty DIV container for the progress bar.

<div class="progress-js"></div>

3. You can then customize the progress bar by adding various data attributes to the <div> element, such as width, height, stroke width, foreground color, background color, font size, font weight, duration, starting value, overall value, suffix, and shadow. For example:

<div 
  class="progress-js" 
  data-width="100" 
  data-height="100" 
  data-stroke-width="10" 
  data-value="0" 
  data-font-size="1rem" 
  data-font-weight="900"
  data-fgColor="#757AAE"
  bgColor="#CCCCCC"
  duration="2s"
  overall="100"
  suffix="%"
  shadow="false">  
</div>

4. Update the date manually.

progressJs.update('progress-js-1', 90);

You Might Be Interested In:


Leave a Reply