Menu

Abdul Ahad

servant of the only One!
Mon, 14 August 2017

SimPro - JS Library For Progress Bar

Hello, everyone!

To show any sort of progress of any task in web, has never been easier since the html5 release. But in order to create circular progress bar is kind of boring and time consuming. This is not a problem anymore.

Today i am glad to share SimPro with you. A JavaScript library to create, manage circular progress bar for the web.

The main features of the SimPro are:

  • Light-weight
  • Fully customizable
  • Simple to implement
  • Free & Premium version

How To Use

First of all add reference to the SimPro libaray in you html web page

<script type="text/javascript" src="path/to/SimPro.js"></script>

Create a container div inside body tag

<div id="progressBarHolder"></div>

Let's create an instance of SimPro with necessary arguments & then set progress of 50.9

var progressBar = new SimPro("progressBarHolder", "progressBarId", 500);
progressBar.setProgress(50.9);

progressBarHolder : the id of the div, that will hold the progress bar.
progressBarId : the value for id of the progress bar, so we can later deal with the progress bar
canvasSize : 500px is the size of the progress bar

You should create instance of SimPro, when DOM is ready. Otherwise your progress bar container will be null & an exception will be thrown.

For download & complete documentation, visit http://abdulahad.net/project/simpro

Hope, in your upcoming projects, you will find use cases for SimPro & hope you will use it.

Share