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

Ce atribut indica faptul ca un camp de formular trebuie completat?

required="required" autofocus="autofocus" placeholder="text"

<input type="text" name="name1" required="required" />

Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?

translate() scale() skew()

#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}

Click pe metoda obiectului Date care returneaza ziua din luna.

setDate() getMonth() getDate()

var rightnow = new Date();
var day = rightnow.getDate();
alert(day);

Ce functie este folosita pentru a incarca un fisier pe server?

is_file() move_uploaded_file() fopen()

if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}

Cum se spune in engleza expresia: "Ploua cu galeata"?

rain cats and dogs rain buckets quiet rain

In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.

Cum se spune in spaniola expresia: "Ploua cu galeata"?

llover cubo llover a cántaros lluvia tranquila

En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.