Spinner

an indeterminate loading indicator. inside a button it inherits the text colour.

Example

<span class="lucent-spinner lucent-spinner--sm" role="status" aria-label="Loading">
</span>
<span class="lucent-spinner lucent-spinner--md" role="status" aria-label="Loading">
</span>
<span class="lucent-spinner lucent-spinner--lg" role="status" aria-label="Loading">
</span>

Playground

size 
 
 
 
Using it
 
 
  
 Angular  lucent-spinner 
import { LucentSpinner } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-spinner 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 size input sm | md | lg md diameter. 
 label input string '' accessible name; defaults to “Loading”. 
  
 
  
Theming
 
 
 
Color (1)
  
 
Size & spacing (2)
  
 
Border & radius (1)
  
 
Other (3)