{{#> web/layout/default title="Spinner" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">

      <svg width="24" height="24" class="animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
      </svg>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Colors</h2>

    <div class="docs-Stack docs-Stack--start">

      <svg width="24" height="24" class="animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
      </svg>

      <svg width="24" height="24" class="text-primary animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
      </svg>

      <svg width="24" height="24" class="text-secondary animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
      </svg>

      <div class="docs-Box">
        <svg width="24" height="24" class="text-primary-inverted animation-spin-clockwise">
          <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
        </svg>
      </div>

      <div class="docs-Box">
        <svg width="24" height="24" class="text-secondary-inverted animation-spin-clockwise">
          <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
        </svg>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Icon Props</h2>

    <div class="docs-Stack docs-Stack--start">

      <svg width="36" height="36" class="animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
      </svg>

      <svg width="24" height="24" class="animation-spin-clockwise">
        <use xlink:href="/assets/icons/svg/sprite.svg#spinner"/>
        <title>Spinner title</title>
      </svg>

    </div>

  </div>

</section>

{{/web/layout/default }}