Spinner

Examples

Basic

Basic cards can display any content with no header or footer.

<ods-spinner></ods-spinner>

import { OdsSpinner } from '@ods/components/react.spinner';

const Example = () => {
  return (
    <OdsSpinner></OdsSpinner>
  )
}

export default Example;

Size

Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.

<ods-spinner class="spinner-size-example"></ods-spinner>

<style>
  .spinner-size-example {
    font-size: 3rem;
  }
</style>

import { OdsSpinner } from '@ods/components/react.spinner';

const css = `
  /* Only used for documentation */
  .spinner-size-example {
    font-size: 3rem;
  }
`;

const Example = () => {
  return (
    <>
      <OdsSpinner className="spinner-size-example"></OdsSpinner>

      <style>{css}</style>
    </>
  )
}

export default Example;

Track Width

The width of the spinner’s track can be changed by setting the —track-width custom property.

<ods-spinner class="spinner-track-example"></ods-spinner>

<style>
  .spinner-track-example {
    font-size: 2rem;
  }
</style>

import { OdsSpinner } from '@ods/components/react.spinner';

const css = `
  /* Only used for documentation */
  .spinner-track-example {
    font-size: 50px;
    --track-width: 10px;
  }
`;

const Example = () => {
  return (
    <>
      <OdsSpinner className="spinner-track-example"></OdsSpinner>

      <style>{css}</style>
    </>
  )
}

export default Example;

Custom Color

The spinner’s colors can be changed by setting the —indicator-color and —track-color custom properties.

<ods-spinner class="spinner-color-example"></ods-spinner>

<style>
  .spinner-color-example {
    font-size: var(--ods-sys-font-size-3xl);
    --indicator-color: var(--ods-sys-color-status-danger);
    --track-color: var(--ods-sys-color-status-danger-muted);
  }
</style>

import { OdsSpinner } from '@ods/components/react.spinner';

const css = `
  /* Only used for documentation */
  .spinner-color-example {
    font-size: var(--ods-sys-font-size-3xl);
    --indicator-color: var(--ods-sys-color-status-danger);
    --track-color: var(--ods-sys-color-status-danger-muted);
  }
`;

const Example = () => {
  return (
    <>
      <OdsSpinner className="spinner-color-example"></OdsSpinner>

      <style>{css}</style>
    </>
  )
}

export default Example;

Importing

import '@ods/components/web.spinner';

import { OdsSpinner } from '@ods/components/react.spinner';

import { OdsSpinner } from '@ods/components/react.spinner';