Tuesday, February 28, 2017

jQuery - Progressbar.js

Progressbar.js is a jQuery plugin for showing progress bar
A Simple of progressbar example as shown below
<!doctype html>
<html>

   <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 = "https://www.jqueryscript.net/css/jquerysctipttop.css" 
         rel = "stylesheet" type = "text/css">
      <link rel = "stylesheet" href = "jQuery-plugin-progressbar.css">
  
      <script src = "https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src = "jQuery-plugin-progressbar.js"></script>
   </head>
 
   <body>

      <div class = "progress-bar position"></div>
      <div class = "progress-bar position" data-percent = "40" 
         data-duration = "1000" data-color = "#ccc,yellow"></div>
      <div class = "progress-bar position" data-percent = "90" 
         data-color = "#a456b1,#12b321"></div>
   
      <input type = "submit" value="reload">
  
      <script>
         $(".progress-bar").loading();
   
         $('input').on('click', function () {
            $(".progress-bar").loading();
         });
      </script>

   </body>
 
</html>
This should produce following result −
Click here
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)