HTML
Progress Element
Sök…
parametrar
| Parameter | Värde |
|---|---|
| max | Hur mycket arbete uppgiften kräver totalt |
| värde | Hur mycket av arbetet har redan utförts |
| placera | Detta attribut returnerar den aktuella positionen för <progress> -elementet |
| etiketter | Detta attribut returnerar en lista med <progress> elementetiketter (om sådana finns) |
Anmärkningar
Elementet <progress> stöds inte i versioner av Internet Explorer mindre än 10
Elementet <progress> är fel element som ska användas för något som bara är en mätare, snarare än uppgiften. Att till exempel visa användningen av diskutrymme med hjälp av elementet <progress> är olämpligt. Istället är elementet <meter> tillgängligt för denna typ av fall.
Framsteg
Elementet <progress> är nytt i HTML5 och används för att representera framstegen för en uppgift
<progress value="22" max="100"></progress>
Detta skapar en stapel fylld 22%
Ändra färgen på en framstegsfält
Framstegsfält kan utformas med progress[value] -väljaren.
Detta exempel ger en framstegsfält med en bredd på 250px och en höjd av 20px
progress[value] {
width: 250px;
height: 20px;
}
Framstegsfält kan vara särskilt svåra att style.
Chrome / Safari / Opera
Dessa webbläsare använder -webkit-appearance väljaren för att -webkit-appearance framstegstaggen. För att åsidosätta detta kan vi återställa utseendet.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Nu kan vi utforma själva behållaren
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox utformar framstegsfältet lite annorlunda. Vi måste använda dessa stilar
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ stöder progress . Det stöder emellertid inte egenskapen background-color . Du måste använda färgegenskapen istället.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML Fallback
För webbläsare som inte stöder progress kan du använda detta som en lösning.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Webbläsare som stöder framstegstaggen kommer att ignorera det kapslade inuti. Äldre webbläsare som inte kan identifiera framstegstaggen kommer att göra div istället.