Progressbar.js（Progressbar.js）

优质

小牛编辑

134浏览

2023-12-01

Progressbar.js是一个用于显示进度条的jQuery插件

一个简单的进度条示例如下所示 -

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