Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="loadbar" id="loadbar"> <div class="bar"></div> <div class="text">0%</div> </div> <button onclick="load()">Načíst</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.loadbar {position:relative;border:1px solid grey;width:300px;height:1.7em;} .loadbar .bar {position:absolute;background:#0077af;height:100%;width:0;} .loadbar .text {width:100%;text-align:center;position:absolute;color:black;line-height:1.7em;}
CSS
Autoformát
CSS reset
Až na konci
function load() { var bar=document.getElementById("loadbar").childNodes[1]; var text=document.getElementById("loadbar").childNodes[3]; function loadLoop(x) { for(let i=0;i<=100000;i++) { //načítání něčeho, co vyžaduje hodně opakovaných kroků } bar.style.width=text.innerText=x+"%"; if(x>=100)return; x=x+1; setTimeout(function(){loadLoop(x)},60); } loadLoop(0); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>