Circular Progress

0.4.0

Circular Progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. The behavior of the indicator is dependent on whether the progress of a process is known.

Demo

Installation

Kodexempel
npm install @sj-ab/component-library.ui.circular-progress

Länkar

Best practices

Examples

Circular Progress Example 1

Example 1

Circular Progress Example 2

Example 2

Tillgänglighet

WAI-ARIA

Circular Progress är byggd som en "indeterminable progressbar".

Det innebär att den använder rollerna:

  • role="progressbar" för att kommunicera att komponenten är en laddindikator
  • aria-valuemin med implicit värde 0
  • aria-valuemax med implicit värde 100
  • aria-valuenow utan explicit värde, för att meddela att laddtiden är obestämd.
  • aria-label för att sätta ett namn på komponenten.

Utvecklare ansvarar för att sätta en giltig aria-label. I övrigt hanteras all WAI-ARIA internt i komponenten.

Se till att aria-label inte skiljer sig för mycket från den synliga etiketten!

Change log

Statistik

  • Importer av Circular Progress

    4

  • Repos med Circular Progress

    20%

  • Senaste installerade version av Circular Progress

    0.4.0

  • Äldsta installerade version av Circular Progress

    0.4.0