Jquery time how to make a progressbar
Question
<script type="text/javascript">
var count = 0;
var timer = $.timer(
function() {
count++;
$('.count').html(count);
},
1000,
true
);
</script>
How can i make a progressbar with timer ? Example every second add to div with
<div style="background:#000;width:$.timer%;"><< here</div>
3 answers
solution1
1 ACCPTED 2015-11-28 14:39:00
you can use jQuery UI plugin. ( with timer )
https://jqueryui.com/progressbar/
<script>
var v = 0;
var upProgress = function() {
v++;
$( "#progressbar" ).progressbar({
value: v
});
setTimeout( upProgress , 1000 );
};
$(function() {
setTimeout( upProgress , 1000 );
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
solution2
0 2015-11-28 14:42:33
PS. Try exploring the new progress element ;)
$("progress").animate({v:1}, { duration: 5000, step: function(v){ this.value = v } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress min="0" max="1">
solution3
0 2015-11-28 15:09:45
If you don't want to use jQuery:
HTML
<div id="progressbar">0%</div>
CSS
#progressbar {
width: 0px;
background-color: blue;
color: white;
padding: 5px;
}
JS
function progressBar() {
var progress = 1, timer, percent;
var bar = document.getElementById('progressbar');
var loop = function loop (progress) {
if (progress === 11) {
clearTimeout(timer);
} else {
percent = progress * 10;
bar.style.width = percent + 'px';
bar.textContent = percent + '%';
timer = setTimeout(loop, 1000, ++progress);
}
}
loop(progress);
}
progressBar();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make a progressbar with time data?
jQuery UI: How to make a multi colored ProgressBar? Segments colored differently
How to reset progressbar in Jquery
How To Make Realtime Progressbar Without PHP Pusher
How I can make a progressbar in PixiJS?
How can I make a ProgressBar with px as width?
jQuery: how to produce a ProgressBar from given markup
how to use a variable in jquery ui progressbar
jquery-ui-progressbar to recure…repeat a 2nd time
How to make jquery functions run one at a time
Related Tags