極客書

jQuery Progressbar.js

js是顯示進度條的jQuery插件

一個簡單的progressbar示例如下所示;

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

這將產生以下結果&負;