jQuery-Progressbar.js

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>

これは、次の結果を生成する必要があります-

リンク：/jquery/src/progressbar/index [ここをクリック]

Jquery-progressbar

jQuery-Progressbar.js