Spinner

Usage

The spinner will center horizontally and vertically in the .spinner container.

<div class="spinner">
  <div>&hellip;loading</div>
</div>
<div class="spinner">
    <div>&hellip;loading</div>
</div>
/* No context defined for this component. */
  • Content:
    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
    
      div {
        @include spot-image('spinner', 7rem);
    
        text-indent: 200%;
        white-space: nowrap;
        overflow: hidden;
        animation: spin 2s cubic-bezier(.75, .25, .25, .75) infinite;
      }
    }
    
    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }
    
  • URL: /components/raw/spinner/_spinner.scss
  • Filesystem Path: components/21-atoms/spinner/_spinner.scss
  • Size: 337 Bytes