Hopp til innhold

Loader

En lasteindikator viser brukeren at systemet jobber. Vi bruker lasteindikatoren når vi har handlinger eller prosesser som tar lengre tid enn ett sekund.

EksemplerBrukUniversell utformingKode

Kom i gang

Installer
npm i @fremtind/jkl-loader-react
Bruk
import { Loader } from "@fremtind/jkl-loader-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-loader/loader.min.css";

import "@fremtind/jkl-loader/skeleton-loader.min.css";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

Loader
Egenskaper
Variant
Visning
Tema
Tetthet
<Loader variant={'large'} textDescription="Laster innhold" />

Skeleton

SkeletonLoader
Visning
Tema
Tetthet
<SkeletonAnimation

  role="none presentation" // Kun for eksempelet, ellers blir det mange alerts på siden

>

  <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>

    <SkeletonElement width={350} height={32} />

    <SkeletonInput />

    <SkeletonTextArea />

    <SkeletonCheckboxGroup checkboxes={3} />

    <SkeletonRadioButtonGroup radioButtons={3} />

    <SkeletonButton width={225} />

    <SkeletonTable>

      <SkeletonTableHeader>

        <div style={{ width: 215 }}>

          <SkeletonElement width={115} height={16} />

        </div>

        <div style={{ width: 115 }}>

          <SkeletonElement width={115} height={16} />

        </div>

      </SkeletonTableHeader>

      {Array.from(Array(5)).map((_, index) => (

        <SkeletonTableRow key={index}>

          <div style={{ width: 215 }}>

            <SkeletonElement width={index % 2 ? 115 : 185} height={19} />

          </div>

          <div style={{ width: 115 }}>

            <SkeletonElement width={24} height={24} shape="circle" />

          </div>

        </SkeletonTableRow>

      ))}

    </SkeletonTable>

  </div>

</SkeletonAnimation>

React API

Her finner du en oversikt over props på komponentene i pakken.