Spinner examples

Show params

Params

params:
- name: text
  type: string
  required: false
  description: Text for screenreaders.
- name: classes
  type: string
  required: false
  description: Classes to add to the spinner component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the spinner component.

default

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner()  }}

Markup

<!-- spinner -->
<div class="c-spinner " data-module="c-spinner" >
</div>
<!-- /spinner -->

With screenreader text

Use a custom screenreaders text instead of default one

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "text": "Espere por favor",
  "classes": "text-neutral-base"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-neutral-base" data-module="c-spinner" >
  <p class="sr-only" role="alert" aria-live="assertive">
    Espere por favor
  </p>
</div>
<!-- /spinner -->

Size xs

Use the text size classes to size the spinner

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-xs"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-xs" data-module="c-spinner" >
</div>
<!-- /spinner -->

Size lg

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-lg"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-lg" data-module="c-spinner" >
</div>
<!-- /spinner -->

Size 6xl

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-6xl"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-6xl" data-module="c-spinner" >
</div>
<!-- /spinner -->

Neutral color base

Use the text color classes to colorize the spinner

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-neutral-base"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-neutral-base" data-module="c-spinner" >
</div>
<!-- /spinner -->

Primary color

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-primary-base"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner text-primary-base" data-module="c-spinner" >
</div>
<!-- /spinner -->

Set width and height container with classes

Use the size classes to change container dimensions.

Show code

Macro

{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "border border-neutral-light w-60 h-60"
})  }}

Markup

<!-- spinner -->
<div class="c-spinner border border-neutral-light w-60 h-60" data-module="c-spinner" >
</div>
<!-- /spinner -->