Home > DeveloperSection > Forums > How to use jQuery - Progressbar.js in webform
Ankit Singh

Total Post:341

Points:2389
Posted on    January-20-2016 9:44 PM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 261  View(s)
Rate this:
I want to use  jQuery - Progressbar.js in web application how to do this please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    January-20-2016 9:48 PM

when we want to view user profile complete  status in percentage overview. that time we can use  jQuery - Progressbar.js

for interactive layout . here we try to a amall sample.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome = 1">
    <meta name="viewport" content="width = device-width,
         initial-scale = 1">

    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css"
        rel="stylesheet" type="text/css">
    <link href="Content/jQuery-plugin-progressbar.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="Scripts/jQuery-plugin-progressbar.js"></script>
</head>

<body>
       
    <div id="progress" class="progress-bar position" data-percent="50"
        data-color="#a456b1,#12b321">
    </div>
   
    <input type="submit" value="Show Profile Status"/>

    <script>        
      
        $(".progress-bar").loading();
        $('input').on('click', function () {
            $(".progress-bar").loading();
        });
    </script>

</body>
</html>

 


Don't want to miss updates? Please click the below button!

Follow MindStick