Spinner

Overview (v1)

Source: ./src/components/spinner/v1/Overview.mdx

Spinner

The spinner component provides a visual indicator for the loading state. It has attributes for setting the size and styling variants.

Default variation

Story Default:

<oc-spinner-v1 size="100" variant="default"></oc-spinner-v1>

Configuration

The spinner component offers the styling variants default and inverted. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the spinner component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Accessibility

The spinner component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

The SVG element is set to aria-hidden="true" to prevent screen readers from reading the spinner image element.

When using the spinner consider using an ARIA live region for screen reader support or using our global srSpeak utility.```

Further reading

• ARIA live regions
• WCAG 2.1 - Understanding - Status Messages (Level AA)
• How to create a simple CSS loading spinner & make it accessible

Configuration (v1)

Source: ./src/components/spinner/v1/Configuration.mdx

Spinner configuration

Configure the spinner component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-spinner-v1 size="100" variant="default"></oc-spinner-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/spinner/v1/SpinnerV1.API.g.mdx

Spinner v1 API

API: <oc-spinner-v1> (SpinnerV1)

The spinner component provides a visual indicator for the loading state. It has attributes for setting the size and styling variants.

Attributes / properties

Events

Variations (v1)

Source: ./src/components/spinner/v1/Variations.mdx

Variations

Listed below are the most common variations of the spinner component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-spinner-variations--default · tags: components

The default configuration uses the default variant.

<oc-spinner-v1 size="100" variant="default"></oc-spinner-v1>

Inverted

Story: components-spinner-variations--inverted · tags: components

The inverted variant renders the spinner with an inverted color scheme.

Args: variant=inverted

<oc-spinner-v1 size="100" variant="inverted"></oc-spinner-v1>

Demo: Accessibility

Story: components-spinner-variations--demo-accessibility · tags: components

<button id="spinner-button">Press To Load</button>

<script>
  (() => {
    const button = document.getElementById("spinner-button");
    const spinner = document.createElement("oc-spinner-v1");

    button.addEventListener("click", () => {
      button.ariaBusy = "true";
      button.after(spinner);
      window.otto.ally.srSpeak("Opening Document");

      setTimeout(() => {
        button.ariaBusy = "false";
        spinner.remove();
      }, 1000);
    });
  })();
</script>

{
  name: "Demo: Accessibility",
  parameters: {
    chromatic: {
      disableSnapshot: true,
      hideInChromatic: true
    }
  },
  render() {
    return html`
      <button id="spinner-button">Press To Load</button>

      <script>
        (() => {
          const button = document.getElementById("spinner-button");
          const spinner = document.createElement("oc-spinner-v1");

          button.addEventListener("click", () => {
            button.ariaBusy = "true";
            button.after(spinner);
            window.otto.ally.srSpeak("Opening Document");

            setTimeout(() => {
              button.ariaBusy = "false";
              spinner.remove();
            }, 1000);
          });
        })();
      </script>
    `;
  }
}