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

This should produce following result −


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *