Skip to content

Spinner

Spinners are used to show the progress of an indeterminate operation.

html
<six-spinner></six-spinner>

Examples

Size

Spinners are sized relative to the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.

html
<style>
  .spinner-demo {
    margin-bottom: 2.5rem;
  }

  six-spinner#medium::part(svg) {
    margin-left: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }

  six-spinner#large::part(svg) {
    margin-left: 2.5rem;
    width: 5rem;
    height: 5rem;
  }
</style>

<div class="spinner-demo">
  <six-spinner></six-spinner>
  <six-spinner style="font-size: 2rem"></six-spinner>
  <six-spinner style="font-size: 5rem"></six-spinner>
</div>

<div class="spinner-demo">
  <six-spinner six="true"></six-spinner>
  <six-spinner id="medium" six="true"></six-spinner>
  <six-spinner id="large" six="true"></six-spinner>
</div>

Stroke Width

The width of the spinner can be changed by setting the --stroke-width custom property.

html
<six-spinner style="font-size: 2rem; --stroke-width: 6px"></six-spinner>

Color

The spinner's colors can be changed by setting the --indicator-color and --track-color custom properties.

html
<six-spinner style="font-size: 2rem; --indicator-color: green"></six-spinner>

Spinner can be configured as animated SIX logo.

html
<six-spinner six="true"></six-spinner>

Properties

PropertyAttributeDescriptionTypeDefault
sixsixIndicates if the spinner is shown as animated SIX logo or simple spinner.booleanfalse

Shadow Parts

PartDescription
"base"The component's base wrapper.
"svg"The spinner icon

CSS Custom Properties

NameDescription
--indicator-colorThe color of the spinner's indicator.
--stroke-widthThe width of the indicator.
--track-colorThe color of the spinner's track.

Dependencies

Used by

Graph


Copyright © 2021-present SIX-Group