In this video we will create an animated progress bar using HTML, CSS and JavaScript. It just an animation for now but during content loading on the page you can use them according to the load time of data.
Original source
In this video we will create an animated progress bar using HTML, CSS and JavaScript. It just an animation for now but during content loading on the page you can use them according to the load time of data.
Original source
8 responses to “How to Create Progress Bar | HTML Tutorials | CSS Tutorials | JavaScript Tutorials”
esto de verdad carga el contenido respecto al preloader?, o solo es visual con un tiempo asignado de demora?
HELP MEEE animation does not appear:
<!DOCTYPE html>
<html lang="en">
<head>
<title> test 2 </title>
<meta charset="="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="percentCount" class="percent-count" </div>
<div class="progress-bar">
<div class="progress" id="progress"> </div>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #333;
}
.percent-count {
width: 450px;
height: 50px;
margin: 100px auto;
font-size: 50px;
text-align: center;
color: #fff;
}
.progress-bar {
width: 506px;
height: 26px;
background-color: #bbb;
border-radius: 13px;
padding: 3px;
margin: 50px auto;
}
.progress {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: dodgerblue;
</style>
}
//scripts.js code
function progress() {
var prg = document.getElementById('progress');
var percent = document.getElementById('percentCount');
var counter = 5;
var progress = 25;
var id = serInterval(frame, 50);
function frame() {
if(progress == 500 && counter == 100) {
clearInterval(id);
} else {
progress += 5;
counter += 1;
prg;style.width = progress + 'px';
percent.innerHTML + counter + '%';
}
}
}
progress();
Bad idea, this is false percent. The document has loaded before this has finished!
When it reached 100%, it'll hide and contents will show. How to I can do it?
code download? i want to experiment with it 😛
thanks man !^)
gj
though it is a completely silent tutorial, it is interesting example, thanks anyway