Loader

Om komponenten

PktLoader er en komponent som brukes for å vise at en side eller et element laster. PktLoader kan brukes i kombinasjon med andre komponenter, som for eksempel knapper, for å vise at en handling er i gang. PktLoader er en animert SVG ved hjelp av SMIL (Synchronized Multimedia Integration Language) som gir en jevn og fin animasjon, og vil fungere i alle moderne nettlesere.

PktLoader kan brukes som standalone eller som en wrapper rundt innholdet som skal lastes inn. For å bruke PktLoader som wrapper rundt innhold som lastes inn, kan man kontrollere visning av innholdet med prop isLoading.

Varianter

I Loader-komponenten finnes det tre ulike varianter:

1. rainbow - en regnbue farget spinner (default)
2. shapes - en loader med bølgeanimerte OSLO-bokstaver
3. blue - en blå spinner

Komponentbygger

Her kan du teste ut alle egenskapene til PktButton, og få ferdig kode for React og HTML. For Vue-bruk kan du i de fleste tilfeller bruke samme kode som React, men vær oppmerksom på at Vue har enkelte forskjeller i hvordan props sendes inn og hvordan hendelser håndteres.

Hvordan ta i bruk?

// React
import { PktLoader } from "@oslokommune/punkt-react";

// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-loader.js";

// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-loader.js"></script>;