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 javascipt as follows.
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
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.
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.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Include the jQuery progress circle plugin after jQuery library.
<link href="circle.css" rel="stylesheet" type="text/css"> <script src="progress-circle.js"></script>
3. mention the below HTML tag to display circle loading bar.
<div id="circle"> </div>
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
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="circle.css" rel="stylesheet" type="text/css"> <script src="progress-circle.js"></script> <style> 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; } </style> <script 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 }); }); </script> </head> <body> <div class="main-container"> <div id="circle1"></div> <div id="circle2"></div> <div id="circle3"></div> </div> </html>
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.
No comments:
Post a Comment