Létrehozása az előrehaladás a html
És helló megint, ma fogunk létrehozni egy betöltő sáv vagy ahogy nevezik - progressbar. És épít be kéne az egyik legegyszerűbb módszer a HTML5. Valójában nagyon állapotjelző sáv lehet alkalmazni, ahol szükséges mutatója befejezése bármilyen tranzakció százalékban (a közvélemény-kutatások, ábrázolási, stb.) A rendszer segítségével a CSS3 nem lesz összetettségét kérdés a saját. És a mi esetünkben nem szükséges, hogy egy kép, amely kétségtelenül egy nagy plusz.
A címke HTML5
Ha a fenti kódot HTML, akkor megjelenik egy folyamatjelző sáv jelenik meg alapértelmezésben, és az alap stílust.
Ha a különböző operációs rendszerek, akkor előfordulhat, hogy a haladás bár ezek különbözőek.
Most hozzá stílust a saját állapotjelző sáv. Mint választó a CSS fájlban fogjuk használni a tag maga haladást:
Például a fenti kód eltávolítja a határ a folyamatjelző sáv, szürke háttér miatt.
Most a problémák kezdenek)
Történelmileg úgy történt, hogy a különböző böngészők - különböző választókat. Ezért, hogy helyesen jelenik meg folyamatjelző sáv a különböző böngészőkben, akkor érdemes használni a pszeudo-szelektor, amely kifejezetten egy adott böngésző.
Safari és Chrome:
HTML
A következő lépés, hogy hozzon létre egy folyamatjelző animációját. Tehát, az állapotjelző sáv tele van balról jobbra. Azaz, akkor kezdődik, amikor értéke = „0”, és akkor végződik, amikor a értéke = „max”. Vegyük például az alábbi kódot:
jQuery
Animálni a folyamatjelző sáv fogja használni a jQuery könyvtár, ezért szükséges, hogy először csatlakozni:
Ezután írjunk forgatókönyvet, amely lényegében kitölti a progresszió bar. Az első sorban tudjuk azonosítani azt az elemet, tele lesz (ez egy folyamatjelző sáv), a második megkapjuk maximum állapotjelző attribútum max:
Ezután hozzon létre egy változót, hogy tart az értéke az animációs funkciók:
Belül ezt a funkciót, akkor növeli a töltelék a folyamatjelző eggyel.
Majd adjon attribútumértékben növelt értéke. Azt is be fogja mutatni a százalékos letöltést jelző sáv mellett:
Aztán van egy funkció, amely elindítja a boot animáció funkció:
Ezen a ponton az animáció letöltés működik, de az értéke növekedni fog a végtelenségig. Ezért szükséges feltételeket teremteni, amelyek mellett az animáció megáll, amikor az állapotjelző sáv teljesen fel van töltve, vagyis a maximum eléréséhez.
Mi lesz az eredmény tárolásához a változó funkció. És azon belül a töltési funkciót fogja írni a feltétel:
Itt ezen és minden!) Egyszerű, nem? Remélem, hogy ez a bemutató volt hasznos az Ön számára. Sok szerencsét!