Kumo Svelte
  • Home
  • Installation
  • Colors
  • Accessibility
  • Changelog
  • Autocomplete
  • Badge
  • Banner
  • Breadcrumbs
  • Button
  • Checkbox
  • Clipboard Text
  • Cloudflare Logo
  • CodeHighlighted
  • Collapsible
  • Combobox
  • Command Palette
  • Date Picker
  • Dialog
  • Dropdown
  • Empty
  • Flow
  • Grid
  • Input
  • InputArea
  • InputGroup
  • Label
  • Layer Card
  • Link
  • Loader
  • MenuBar
  • Meter
  • Pagination
  • Popover
  • Radio
  • Select
  • Sensitive Input
  • Sidebar
  • Skeleton Line
  • Switch
  • Table
  • Table of Contents
  • Tabs
  • Text
  • Toast
  • Toolbar
  • Tooltip
  • Charts
  • Colors
  • Timeseries
  • Maps
  • Sankey
  • Custom Chart
  • Page Header
  • Resource List
  • Delete Resource
Loader
kumo-svelte

Loader

A loading spinner to indicate loading state.

<script lang="ts">
  import { Loader } from "kumo-svelte/components/loader";
</script>

<Loader />

Import

import { Loader } from "kumo-svelte/components/loader";

Usage

<script lang="ts">
  import { Loader } from "kumo-svelte/components/loader";
</script>

<Loader />

Examples

Default Size

<script lang="ts">
  import { Loader } from "kumo-svelte/components/loader";
</script>

<Loader />

Custom Size

Pass a number to set a custom pixel size.

<script lang="ts">
  import { Loader } from "kumo-svelte/components/loader";
</script>

<Loader size={24} />

API Reference

Loader

PropTypeDefault
aria-labelstring—
sizeKumoLoaderSize | numberKUMO_LOADER_DEFAULT_VARIANTS.size

Accessibility

The loader renders with role="status" and an accessible label. Override aria-label when the loading context needs a more specific announcement.

On this page

  • Import
  • Usage
  • Examples
    • Default Size
    • Custom Size
  • API Reference
    • Loader
  • Accessibility