Spinner

Overview Style Guidelines Code Demos Accessibility
  1. Installation
  2. Usage
  3. rh-spinner
  1. Installation
  2. Usage
  3. rh-spinner

Installation

Usage

Default/Large Spinner 

<rh-spinner></rh-spinner>

Medium Spinner 

<rh-spinner size="md"></rh-spinner>

Small Spinner 

<rh-spinner size="sm"></rh-spinner>

rh-spinner

Slots 1
Slot Name Description

Optional text label below the animated circle.
Attributes 1
DOM Property Description Type Default
size

Preset sizes for the spinner

 
'sm' | 'md' | 'lg'

'lg'
Methods 0

None

 Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 18

Token Copy
--rh-color-accent-base-on-dark
--rh-color-accent-base-on-light
--rh-color-gray-10
--rh-color-gray-70
--rh-font-family-body-text
--rh-font-size-body-text-lg
--rh-font-size-body-text-md
--rh-font-size-body-text-sm
--rh-font-weight-body-text-regular
--rh-length-2xs
--rh-length-4xl
--rh-length-sm
--rh-length-xs
--rh-line-height-body-text
--rh-size-icon-01
--rh-size-icon-04
--rh-size-icon-06
--rh-space-lg