jQuery - Progressbar.js
Progressbar.js é um plugin jQuery para mostrar a barra de progresso
Um exemplo simples de barra de progresso conforme mostrado abaixo -
<!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>Isso deve produzir o seguinte resultado -
Clique aqui