#Spinner

Show that something is loading with a rotating icon, when you can't tell how long it will take.

#Installation

npx @blotch/dolan add spinner

import { UiSpinner } from '../components/ui/spinner';

#Usage

import { Component } from '@angular/core';
import { UiSpinner } from '../components/ui/spinner';

@Component({
  selector: 'app-loading',
  imports: [UiSpinner],
  template: `<ui-spinner color="rgba(113, 113, 122, 1)" />`,
})
export class Loading {}

• The spinner turns once every 1.6 seconds, for as long as it's on screen.
• It's drawn with Lynx's <svg> element, which can't read your CSS. Pass color as a literal color, such as #3b82f6 or rgba(…). A theme variable such as var(--primary) won't work there.
• Without color, the icon keeps the SVG's currentColor stroke, which doesn't follow your theme. Set color whenever the spinner sits on a dark background or the app has dark mode.
• It has no class input. Wrap it in a <view> to position it.

#Sizes

<ui-spinner size="xs" />
<ui-spinner size="sm" />
<ui-spinner size="md" />
<ui-spinner size="lg" />

xs is 16px, sm 20px, md 24px and lg 32px.

#In a button

Button shows a spinner in place of its label while loading is true, so you don't need to add one yourself.

#API

#UiSpinner

No outputs.

#Related

• Button: shows a spinner while loading
• Progress: show how far a task has got
• Skeleton: hold the place of content that's loading