In acest tutorial este prezentat un script care simuleaza o incarcare de continut (loading), afisand o bara de incarcare.
Cand bara de progres a incarcarii este completa (ajunge la 100%), script-ul executa o functie JavaScript.
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.
Pe langa functiile JavaScript, acest script utilizeaza si stiluri CSS pentru a seta inaltimea, culoarea, si lungimea initiala 0 pentru tag-ul cu bara de incarcare, dupa cum puteti vedea in codul din exemplul de mai jos.


Pentru a folosi acest script, adaugati in pagina dv. urmatorul cod HTML si JavaScript, precum si codul CSS de mai jos, pentru grafica.

Cod Script afisare bara de incarcare

<div id="loading">Aici adaugati banner-ul, sau orice cod HTML.<div id="loadbar">&nbsp;</div></div>
<button onclick="simLoad('loadbar');">Click</button>

<script type="text/javascript"><!--
// by - 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>
- Puteti sterge butonul "Click" daca apelati functia simLoad() in alt mod.

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>
Mai intai am definit variabilele pentru numarul de secunde pana cand bara de incarcare e completa, un procent folosit ca sa seteze viteza barei de progres, si un continut HTML care va fi afisat in bara de incarcare, cand ajunge la 100%.
Apoi e creata o functie recursiva (simLoad() ) care foloseste setTimeout() ca sa se auto-apeleze pana cand procentul ajunge la 100. Aceasta functie mareste lungimea barei, iar cand e completa, apeleaza o alta functie care poate efectua orice instructiuni JavaScript pe care le adaugati in ea.
Vedeti si explicatiile din cod.

  - Exemplu:
In urmatorul exemplu, functia simLoad() e accesata prin apasarea unui buton "Click", dar daca doriti puteti apela functia direct la incarcarea paginii web, stergand cele 3 slash-uri de la sfarsitul codului din script.
Numarul de secunde pentru a completa intreaga bara de progres e setat 5.
<!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 - 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">&nbsp;</div></div>
<button onclick="simLoad('loadbar');">Click</button>

<script type="text/javascript"><!--
// by - 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>
- Acest cod va crea o pagina web care afiseaza urmatorul rezultat (apasati pe butonul "Click"):
Simulare bara de incarcare
 

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Afisare / Simulare bara de incarcare

Last accessed pages

  1. Numerale, Numere in limba engleza - Numerals (21187)
  2. Gramatica limbii engleze - Prezentare Generala (92216)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (46914)
  4. Verbe reflexive 1 (2340)
  5. Substantivul din limba engleza - The Noun (22919)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2261)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (872)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)