Spinner

Communicate an ongoing task with a spinner and a short message.

<sy-spinner>Installation guide Basic usage

Live preview

Interact with the component to see results here.

SizeWaiting messageDisplay delay (ms)

Backdrop maskHide

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="Loading"
    size="medium"
    delay="0"
  ></sy-spinner>
</div>

Usage guide

Represent short tasks or waiting with unknown progress. Consider Skeleton when the expected content structure is known.

Reserve a loading area
Place it in a container with a defined height. inline also shows a backdrop mask over that area.
Avoid flicker for short tasks
Set a delay in milliseconds with delay.
Clear it when finished
When the task ends, set hidden = true or remove the element.

Examples

Processing indicator

Use a short message to explain what the user is waiting for.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="Loading"></sy-spinner>
</div>

Area mask

Set inline to show a backdrop mask over the area.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="Saving" inline></sy-spinner>
</div>

Display delay

Show after 800ms. Skip the indicator for tasks that finish quickly.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="Loading" delay="800"></sy-spinner>
</div>

Large indicator

Use xlarge for a spacious content area.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="Loading" size="xlarge"></sy-spinner>
</div>

Hide after completion

Enable hidden to hide the spinner. In your app, set it to false when a task starts and true when it succeeds or fails.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="Loading"
    size="medium"
    delay="0"
    hidden
    id="supplement-1"
  ></sy-spinner>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "hidden": true
  });
</script>

Inline loading

Keep a small loading indicator within the surrounding content flow.

View code

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="Loading"
    size="small"
    delay="0"
    inline
    id="supplement-1"
  ></sy-spinner>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "inline": true,
    "size": "small"
  });
</script>

Feature examples

Choose a feature from 6 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.