- jQuery - Home
- jQuery - Roadmap
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Selectors
- jQuery - Events
- jQuery - Effects
- jQuery - HTML/CSS
- jQuery - Traversing
- jQuery - Miscellaneous
- jQuery - Properties
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
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">
<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 −
Click hereAdvertisements