Components / Feedback

Loading Wheel

Component

A circular spinner component to indicate loading or processing states. It's lightweight and customizable for various layouts and use cases.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentLoadingWheel

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { LoadingWheel } from "sveltekit-ui"
</script>

<div style="display: flex; align-items: center; gap: 1rem;">
  <LoadingWheel size={2} aria_label="Loading projects" />
  <span>Loading projects…</span>
</div>

API reference

Props accepted by the component.

4 entries in properties

Property	Type	Default	Description
`size`	`number`	`null`	Diameter of the loader in rem. If not set, it takes the container's full width.
`sw`	`number`	`0.3`	Stroke width of the loader's border in rem.
`color`	`string`	`var(--shadow8-t)`	Color of the loader's animated segment.
`color_bg`	`string`	`var(--tint8-t)`	Background color of the loader's static segment.