Dokumentation och exempel för användning av Bootstrap anpassade förloppsindikatorer med stöd för staplade staplar, animerade bakgrunder och textetiketter.
Hur det fungerar
Progress-komponenter är byggda med två HTML-element, en del CSS för att ställa in bredden och några attribut. Vi använder inte HTML5- <progress>elementet , vilket säkerställer att du kan stapla förloppsindikatorer, animera dem och placera textetiketter över dem.
Vi använder .progresssom ett omslag för att indikera maxvärdet för förloppsindikatorn.
Vi använder det inre .progress-barför att indikera framstegen så här långt.
De .progress-barkräver en inline-stil, verktygsklass eller anpassad CSS för att ställa in deras bredd.
Den .progress-barkräver också en del roleoch ariaattribut för att göra den tillgänglig.
Sätt ihop det hela så har du följande exempel.
Bootstrap tillhandahåller en handfull verktyg för att ställa in bredd . Beroende på dina behov kan dessa hjälpa dig att snabbt konfigurera framsteg.
Etiketter
Lägg till etiketter i dina förloppsindikatorer genom att placera text i .progress-bar.
25 %
Höjd
Vi ställer bara in ett heightvärde på .progress, så om du ändrar det värdet kommer det inre .progress-barautomatiskt att ändra storlek i enlighet därmed.
Bakgrunder
Använd bakgrundsverktygsklasser för att ändra utseendet på individuella förloppsindikatorer.
Flera barer
Inkludera flera förloppsindikatorer i en förloppskomponent om du behöver.
Randig
Lägg .progress-bar-stripedtill någon .progress-barför att applicera en rand via CSS-gradient över förloppsindikatorns bakgrundsfärg.
Animerade ränder
Den randiga gradienten kan också animeras. Lägg .progress-bar-animatedtill .progress-barför att animera ränderna från höger till vänster via CSS3-animationer.