Design Circle Progress indicator using Jquery, HTML and CSS3

Download Link :

In this tutorial, we are going to discuss how to create circle progress indicator using Jquery and CSS3. Circle progress indicator bar you can use it during ajax call and it's make simple loading animation effect during the request processing time.

Progress Circle is a simple jQuery plugin that utilizes CSS3 transforms and transitions to draw a circular progress bar/indicator with percent text display.This awesome jQuery plugin is developed by iammary.

Steps to use this existing Jquery plugins :

1. Include the latest jQuery javascript library on your web page.

2. Include the jQuery progress circle plugin after jQuery library.

3. mention the below HTML tag to display circle loading bar.

4. Initialize the plugin and update the values using javascript as

nPercent : Display the percentage loading
showPercentText : Show percentage when true, otherwise set it to false.
circleSize : Set the circle size
thickness : Thickness of border

Lets see the complete source with example, This will help you to build more understanding on progress loading indicator :