Gdzie wykorzystać ten przykład?
Stopień realizacji i podsumowanie etapu. Wariant „Paski postępu: liczba nad paskiem” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Proporcja wypełnienia przedstawia ustawioną wartość. Przykład nie śledzi automatycznie pobierania pliku ani rzeczywistej operacji serwera.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem
</body>. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Połącz wartość z prawdziwym stanem operacji. Dodaj opis tekstowy, aby informacja nie zależała wyłącznie od koloru i szerokości paska.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Paski postępu: liczba nad paskiem
HTML
<div class="effect"><div class="progress-pack"><h2>Paski postępu</h2><div class="progress-visual" role="progressbar" aria-label="Postęp" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65"><span class="fill-bar"></span><b>65%</b></div><label>Ustaw postęp<input type="range" min="0" max="100" value="65"></label></div></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.progress-pack{width:100%;max-width:500px;margin:auto}.progress-pack h2{font-size:25px}.progress-visual{position:relative;background:#dce5d2;border-radius:8px;margin:25px 0 45px;height:14px;margin-top:35px}.fill-bar{position:relative;display:block;width:65%;height:100%;background:#e95b30;border-radius:inherit;transition:width .25s,height .25s;}.progress-visual b{position:absolute;top:calc(100% + 7px);left:0;width:100%;text-align:center;font:12px monospace;color:#e95b30}.progress-pack label{display:block;font-size:11px;color:#81936d}.progress-pack input{display:block;width:100%;margin-top:10px;accent-color:#e95b30}.progress-visual b{top:auto;bottom:calc(100% + 7px)}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const progress=document.querySelector('.progress-visual');
document.querySelector('.progress-pack input').addEventListener('input',e=>{const value=Number(e.target.value);progress.setAttribute('aria-valuenow',value);progress.querySelector('b').textContent=value+'%';progress.querySelector('.fill-bar').style.width=value+'%';});