jQuery - Progressbar.js-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

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">
	
      <pnk href = "https://www.jqueryscript.net/css/jquerysctipttop.css" 
         rel = "stylesheet" type = "text/css">
      <pnk 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>
      <span class = "progress-bar position"></span>
      <span class = "progress-bar position" data-percent = "40" 
         data-duration = "1000" data-color = "#ccc,yellow"></span>
      <span class = "progress-bar position" data-percent = "90" 
         data-color = "#a456b1,#12b321"></span>
			
      <input type = "submit" value = "reload">
		
      <script>
         $(".progress-bar").loading();
			
         $( input ).on( cpck , function () {
            $(".progress-bar").loading();
         });
      </script>
      
   </body>
</html>

This should produce following result −

jQuery - Progressbar.js

友情链接