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>
Это должно привести к следующему результату —