Komponent

FLoader

Status

Produktionsklar

Laddningsindikator används för att visa att en sida eller en del av en sida håller på att laddas.

• En laddningsindikator bör visas när det tar mer än en sekund att ladda innehållet.
• Placeras på ytan där innehåll som laddas sen ska visas eller i ett eget lager ovanpå sidan
• Texten ska i de flesta fall vara standardtexten "Vänligen vänta"

Teleport

Komponenten teleporteras till body-elementet som standard när den visas som overlay.

Detta kan ändras till valfritt element antingen genom att

• ändra värdet för config.teleportTarget (global för applikationen).
• sätta prop teleport (per komponentinstans)

-<f-loader> </f-loader>
+<f-loader teleport="floader-target"> </f-loader>

Fokushantering

Som standard när laddningsindikatorn visas så informeras skärmläsaranvändare med hjälp av role="alert", som sätts på laddningsindikatorns text.

Om overlay används så sätts istället fokus på laddningsindikatorns text, för att sedan flyttas tillbaka till föregående element när den stängs.

Om man inte vill att fokus ska flyttas till laddningsindikatorns text vid overlay kan man sätta egenskapen focusOnOverlay till false. Då informeras skärmläsaranvändare med hjälp av role="alert" även vid overlay.

-<f-loader overlay> </f-loader>
+<f-loader overlay :focusOnOverlay="false"> </f-loader>

API

Props

show: boolean Optional

Determine if the loader is visible or not

Default: false

overlay: boolean Optional

If loader should be displayed as a fullscreen overlay.

Default: false

delay: boolean Optional

Delay the loader icon and text by 1 second

Default: false

language: string Optional

Language used for determining fallback value for the loading text. Useful if loader is displayed before text keys have been downloaded. Default is Swedish sv, can be changed to English en.

Default: "sv"

focusOnOverlay: boolean Optional

Controls if focus should be set on the loading text when the loader is displayed with overlay.

• When set to true focus will be set on the loading text when the loader is displayed with overlay.
• When set to false no focus will be set, instead aria alert is used to announce loading for screen readers.

Default: true

teleport: string | HTMLElement | undefined Optional

‐

Default: undefined

Slots

default

Slot for define a custom loading text