In aceasta creatie este vorba , cum spune si titlul despre o " Afisare / simulare bara de incarcare ( Loading ) "
Puteti folosi acest script pentru a afisa un banner, sau orice alt continut HTML, timp de un anumit numar de secunde, apoi sa execute orice alte instructiuni JavaScript atunci cand bara de incarcare ajunge la 100%; cum ar fi de exemplu sa afiseze un buton "Inchide" pentru a elimina (ascunde) acel continut.
Cod Script bara de incarcare :
<div id="loading">Aici adaugati banner-ul, sau orice cod HTML.<div id="loadbar"> </div></div>
<button onclick="simLoad('loadbar');">Click</button>
<script type="text/javascript"><!--
// by - www.marplo.net
var ldsec = 5; // defineste numarul de secunde pana cand bara de incarcare ajunge la 100%
var ldpercent = 5; // procentul de incarcare
var ldspeed = ldsec * 1000 / (100/ldpercent); // seteaza viteza de incarcare
// continut care sa fie afisat cat procentul aju ge la 100%
// un tag care va ascunde continutul din blocul cu bara de incarcare
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Inchide</u>';
// defineste o functie recursiva care seteaza si adauga bara de progress
function simLoad(div) {
// preia obiectul cu ID-ul din "div", acesta reprezinta bara de incarcare
var dvload = document.getElementById(div);
ldpercent += 5; // mareste procentul cu 5
// modifica lungimea barei si afiseaza procentele
dvload.style.width = ldpercent+ '%';
dvload.innerHTML = ldpercent+ '%';
if(ldpercent>100) ldpercent = 100; // asigura ca procentele nu depasesc 100
// daca procentul e mai mic decat 100, functia se auto apeleaza
// altfel, apeleaza functia finLoad()
if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
else finLoad(dvload);
}
// functie care poate fi executata cand bara de incarcare este completa
// primeste ca argument obiectul ce contine tag-ul cu bara de incarcare
function finLoad(divobj) {
/** Aici puteti adauga instructiuni JavaScript care sa fie executate cand bara ajunge la 100% **/
// adauga continutul din variabila "ldtxt" (cu butonul Inchide)
divobj.innerHTML = ldtxt;
}
/// simLoad('loadbar') // pentru a afisa bara de incarcare imediat dupa ce pagina e afisata
--></script>Daca vreti sa folositi in alta metoda '' simLoad() " Puteti sterge butonul " Click "
Codul CSS :
<style type="text/css"><!--
#loading {
position:absolute;
top:20%;
left:40%;
width:400px;
margin:2px auto;
border:1px solid #01da02;
padding:3px;
text-align:center;
}
#loading #loadbar {
width:0%;
height:25px;
background-color:blue;
}
--></style>EXEMPLU :
In aceasta creatie functia simLoad() e accesata prin apasarea unui buton "Click" , dar daca vreti puteti apela functia direct la` incarcarea paginii web, stergand cele 3 slash-uri de la' sfarsitul codului din script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial loading bar - www.marplo.net</title>
<style type="text/css"><!--
#loading {
position:absolute;
top:20%;
left:40%;
width:400px;
margin:2px auto;
border:1px solid #01da02;
padding:3px;
text-align:center;
}
#loading #loadbar {
width:0%;
height:25px;
background-color:blue;
}
--></style>
</head>
<body>
<div id="loading">Aici adaugati banner-ul, sau orice cod HTML<div id="loadbar"> </div></div>
<button onclick="simLoad('loadbar');">Click</button>
<script type="text/javascript"><!--
// by - www.marplo.net
var ldsec = 5; // defineste numarul de secunde pana cand bara de incarcare ajunge la 100%
var ldpercent = 5; // procentul de incarcare
var ldspeed = ldsec * 1000 / (100/ldpercent); // seteaza viteza de incarcare
// continut care sa fie afisat cat procentul aju ge la 100%
// un tag care va ascunde continutul din blocul cu bara de incarcare
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Inchide</u>';
// defineste o functie recursiva care seteaza si adauga bara de progress
function simLoad(div) {
// preia obiectul cu ID-ul din "div", acesta reprezinta bara de incarcare
var dvload = document.getElementById(div);
ldpercent += 5; // mareste procentul cu 5
// modifica lungimea barei si afiseaza procentele
dvload.style.width = ldpercent+ '%';
dvload.innerHTML = ldpercent+ '%';
if(ldpercent>100) ldpercent = 100; // asigura ca procentele nu depasesc 100
// daca procentul e mai mic decat 100, functia se auto apeleaza
// altfel, apeleaza functia finLoad()
if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
else finLoad(dvload);
}
// functie care poate fi executata cand bara de incarcare este completa
// primeste ca argument obiectul ce contine tag-ul cu bara de incarcare
function finLoad(divobj) {
/** Aici puteti adauga instructiuni JavaScript care sa fie executate cand bara ajunge la 100% **/
// adauga continutul din variabila "ldtxt" (cu butonul Inchide)
divobj.innerHTML = ldtxt;
}
/// simLoad('loadbar') // pentru a afisa bara de incarcare imediat dupa ce pagina e afisata
--></script>
</body>
</html>
VIDEO :
http://www.youtube.com/watch?v=mCZZfFcVgeM&feature=youtu.be
