Jak vytvořit indikátor průběhu v HTML?

Ukazatele průběhu se používají k určení určitých milníků během úkolu na procenta. Ukazatel průběhu můžete vytvořit v který určuje postup dokončení úkolu. S hodnotou ukazatele průběhu lze manipulovat pomocí JavaScriptu. V tomto článku uvidíme, jak můžete vytvořit indikátor průběhu pomocí HTML, CSS a JavaScript v následujícím pořadí:

• Jak vytvořit indikátor průběhu v HTML?
• Ukazatel průběhu: Příklad

Pojďme začít.

Jak vytvořit indikátor průběhu v HTML?

Indikátor průběhu zobrazuje průběh jakéhokoli prováděného úkolu. Obecně se tyto pruhy používají k zobrazení stavu stahování a nahrávání. Můžeme říci, že indikátory průběhu lze použít k zobrazení stavu všeho, co právě probíhá.

Chcete-li vytvořit základní ukazatel průběhu pomocí , je třeba provést následující kroky:

• Vytvořte strukturu HTML pro ukazatel průběhu - HTML štítek určuje průběh dokončení úkolu.

• Přidání CSS - Dalším krokem je přidání barvy pozadí pruhu postupu a stavu postupu v pruhu pomocí CSS .

#Progress_Status {šířka: 50% barva pozadí: #ddd} #myprogressBar {šířka: 1% výška: 35px barva pozadí: # 4CAF50 zarovnání textu: výška středové čáry: barva 32px: černá}

• Přidání JavaScriptu - Dalším krokem je vytvoření dynamické animované lišty postupu pomocí funkce javascript Aktualizace a scéna .

funkce update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Nyní, když znáte různé kroky k vytvoření indikátoru průběhu, pojďme dál a podívejme se na kompletní příklad indikátoru průběhu.

Ukazatel průběhu: Příklad

Jakmile dokončíte různé kroky k vytvoření indikátoru průběhu, je čas propojit HTML, CSS a JavaScriptové prvky . Následující příklad ukazuje kompletní kód indikátoru průběhu propojující výše uvedené HTML, CSS a JavaScript Kódy:

#Progress_Status {šířka: 50% barva pozadí: #ddd} #myprogressBar {šířka: 2% výška: 20px barva pozadí: # 4CAF50}
Příklad indikátoru průběhu pomocí JavaScriptu
 
Stav stahování souboru:
__init__ v pythonu
  
Spustit stahování funkce update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Výstup:

Tím jsme se dostali na konec našeho článku. Doufám, že jste pochopili různé kroky potřebné k vytvoření indikátoru průběhu.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů tohoto blogu a my se vám ozveme.