Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Design Circle Progress indicator using Jquery, HTML and CSS3

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.
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

2.  Include the jQuery progress circle plugin after jQuery library.
 href="circle.css" rel="stylesheet" type="text/css">
src="progress-circle.js">

3. mention the below HTML tag to display circle loading bar. 
id="circle">

4. Initialize the plugin and update the values using javascipt as follows.
$('#circle').progressCircle({
nPercent
: 70,
showPercentText
: true,
circleSize
: 100,
thickness
: 6
});

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 :

index.html



type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
href="circle.css" rel="stylesheet" type="text/css">
src="progress-circle.js">

body
{
background
-color: #f1f1f1;
}
.main-container {
width
: 500px;
height
: 140px;
margin
: 0px auto;
background
:white;
padding
:10px;

}
.main-container:after {
content
: ".";
display
: block;
height
: 0;
clear
: both;
visibility
: hidden;
}


type="text/javascript">
$
(document).ready(function() {

// Display loader on first load...
$
('#circle1').progressCircle({
nPercent
: 50,
showPercentText
: true,
circleSize
: 120,
thickness
: 6
});

// Display loader on first load...
$
('#circle2').progressCircle({
nPercent
: 30,
showPercentText
: true,
circleSize
: 99,
thickness
: 6
});

// Display loader on first load...
$
('#circle3').progressCircle({
nPercent
: 90,
showPercentText
: true,
circleSize
: 70,
thickness
: 6
});

});





class="main-container">
id="circle1">

id="circle2">

id="circle3">






Output:


Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/design%20circle%20progress%20bar%20using%20jquery

Demo Link :
https://skptricks.github.io/learncoding/Design%20Circle%20Progress%20indicator%20using%20Jquery,%20HTML%20and%20CSS3/index.html.html

This is all about circle loading progress bar using jquery. Please do comment in comment box below in case of any issues.



This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

Share the post

Design Circle Progress indicator using Jquery, HTML and CSS3

×

Subscribe to Selenium Web Driver Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×