Afisare / Simulare bara de incarcare

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"):

<<-Creare aceeasi inaltime la .. -- Verificare si Validare caractere ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag se foloseste in <table> pentru a crea celula de tip "header"?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Ce proprietate CSS seteaza distanta dintre randuri?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Care functie deschide o noua fereastra.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);

Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?

sleeping slept will sleep

He will sleep there.
- El va dormi acolo.

Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?

dormido dormirá durmiendo

Él dormirá allí.
- El va dormi acolo.