!COROANA! !CEL MAI INTELIGENT! !5 STELE!
Cum pot face un loading bar (bară de încarcare) în HTML?
E posibil?
Am nevoie urgent!
Răspunsuri la întrebare
Răspuns:
Da, se poate
Explicație:
<html>
<head>
<style>
div.loading_content{
background-color: green;
width: 0%;
height: 100%;
}
div#loadingBarContainer {
width: 90%;
height: 3%;
border: 5px solid black;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="loadingBarContainer">
<div id="LoadingBar_VAR" class="loading_content"></div>
</div>
<script>
var loadingbar_var = document.getElementById("LoadingBar_VAR");
var load_parts = 100/5;
function load_1(){
// incarca aici
loadingbar_var.style.width = load_parts + "%";
return 0;
}
function load_2(){
// si aici
loadingbar_var.style.width = 2*load_parts + "%";
return 0;
}
function load_3(){
// si aici
loadingbar_var.style.width = 3 * load_parts + "%";
return 0;
}
function load_4(){
// si aici
loadingbar_var.style.width = 4*load_parts + "%";
return 0;
}
function load_5(){
// si aici
loadingbar_var.style.width = 5*load_parts + "%";
return 0;
}
function load (){
load_1();
load_2();
load_3();
load_4();
load_5();
}
load();
</script>
</body>
</html>
Un demo aici (nu incarca nimic dar foloseste setTimeout), in care o functie load o apeleaza pe urmatoarea:
<html>
<head>
<style>
div.loading_content{
background-color: green;
width: 0%;
height: 100%;
}
div#loadingBarContainer {
width: 90%;
height: 3%;
border: 5px solid black;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="loadingBarContainer">
<div id="LoadingBar_VAR" class="loading_content"></div>
</div>
<script>
var loadingbar_var = document.getElementById("LoadingBar_VAR");
function load_1(){
// incarca aici
setTimeout(load_2, 1000);
loadingbar_var.style.width = "20%";
return 0;
}
function load_2(){
// si aici
setTimeout(load_3, 1000);
loadingbar_var.style.width = "40%";
return 0;
}
function load_3(){
// si aici
setTimeout(load_4, 1000);
loadingbar_var.style.width = "60%";
return 0;
}
function load_4(){
// si aici
setTimeout(load_5, 1000);
loadingbar_var.style.width = "80%";
return 0;
}
function load_5(){
// si aici
loadingbar_var.style.width = "100%";
return 0;
}
function load (){
load_1();
}
load();
</script>
</body>
</html>