Skip to main content

Sideelementer

Opplastningsmoduler og elementer​

Sirkulært opplastningselement​

Det sirkulære opplastningselementet skal brukes på små flater og som ikon. I elementet under er loader--size 5.625rem / 90px. Størrelsen endres av designer for hvert prosjekt.


<div class="kv-loader kv-loader--blue loader--size"></div>
<div class="kv-loader kv-loader--green loader--size"></div>
<div class="kv-loader kv-loader--white loader--size"></div>

Lineært opplastningselement​

Lineært opplastningselement eksemplet under bruker class="progressbar__container" for å sette størrelsen på elementet. I dette tilfellet, er container satt på width: 50%;

Lineært opplastningselement uten verdi​

Lineært opplastningselementet bruker klassen progressbar.


<div class="progressbar__container">
    <div class="kv-progressbar__wrapper">
        <div class="kv-progressbar progressbar--demo"></div>
    </div>
</div>

Lineært opplastningselement med verdi​

Lineært opplastningselementet bruker ::after selector for å sette inn verdi og farge på fyll. Eksempel: .progressbar--demo::after {width: 50%; background: var(--blaa_moerk);}

I eksemplet under er progressbar--demo animert til å bytte width fra 0% til 100%. Det gjelder også progressbar--label med hensyn til endring av verdi.


<div class="progressbar__container">
    <div class="kv-progressbar__wrapper">
        <div id="demo" class="kv-progressbar progressbar--demo"></div>
        <label for="demo" class="detail detail--xs progressbar__label"></label>
    </div>
</div>

(!)Filopplastningselementer​

OBS! Under konstruksjon.