package.docs.components.Spinner.examples.Spinner.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Spinner
section: components
cssPrefix: pf-v6-c-spinner
---## Examples

### Basic

```html


```

### Sizes

```html








```

### Inline

An inline spinner inherits its font-size, so its size will match the content around it.

```html


```

### Custom size

```html


```

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="progressbar"` | `.pf-v6-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
| `aria-label="Loading..."` | `.pf-v6-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
| `aria-labelledby="[id of spinner label]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
| `aria-describedby="[id of spinner description]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |

Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.

Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) must be present before changing its status in order for the change to be read.

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-spinner` | `