`<c-loader>`

A loader component that fills the nearest containing element that has css-property position set to 'relative'

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div style="display: grid; gap: 12px; justify-items: start">
    <c-button @click="loading = !loading">Toggle loader</c-button>

    <!-- The loader fills the nearest position: relative ancestor -->
    <div style="position: relative; height: 160px; width: 100%">
      <c-loader :visible.prop="loading" contentdelay="1">
        Loading resources
      </c-loader>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);
</script>

API reference

`<c-loader>`

A loader component that fills the nearest containing element that has css-property position set to 'relative'

Properties

Property	Attribute	Type	Default	Description
`contentdelay`	`contentdelay`	`number`	`0`	Delay in seconds of showing the contents in the slot of the loader
`size`	`size`	`number`	`48`	Size of the loader
`visible`	`visible`	`boolean`	`true`	Whether the loader is shown. Toggling this drives the fade-in / smooth fade-out — keep the element mounted and bind `visible` rather than using `v-if`, which would unmount it and skip the leave transition. For imperative control (non-Vue consumers holding an element ref) the element also exposes `show()` / `hide()` methods. The prop is named `visible` (not `show`) so it doesn't collide with the `show()` method — mirroring native `<dialog>` (`open` property + `show()`/`close()` methods). NOTE: this replaces the original Stencil `hide` prop with its inverse, so the default (`true` = shown) preserves the original default behaviour.
`width`	`width`	`number`	`4`	Width of the loader

Methods

Method	Signature	Description
`hide`	`()`	Imperatively hide the loader (plays the smooth fade-out).
`show`	`()`	Imperatively show the loader (plays the fade-in).

Slots

Slot	Description
`default`	Message text revealed below the spinner after `contentdelay`

CSS parts

Style from outside with c-loader::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The overlay element covering the containing element (scrim, fade transition)
`content`	The message wrapper anchored below the spinner