Saturday, February 10, 2018

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.
<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