<svg class="icon icon--spinner">
  <use xlink:href="/assets/icons/icons.svg#spinner"></use>
</svg>
{{render '@icons--spinner'}}
/* No context defined for this component. */
  • Content:
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
    
      100% {
        transform: rotate(360deg);
      }
    }
    
    .icon--spinner {
      display: none;
      width: 40px;
      height: 40px;
    
      // @see icons.scss for more information on how this is colored.
      color: $color-primary;
      fill: $color-light;
    
      &.js-show,
      .preview > &,
      .js-spinning &,
      .js-spinning-form & {
        display: block;
        animation: rotate .6s linear infinite;
      }
    }
    
    // This class can be added to a container to partially block the visibility of
    // that container and center the spinner on top of it.
    .js-spinning {
      @include clearfix;
      position: relative;
    
      &:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $color-white;
        content: '';
        opacity: .8;
        z-index: 1;
      }
    
      .icon--spinner {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        z-index: 2;
      }
    }
    
    // This class can be added to a form container container to partially block the
    // visibility of form items and expose a spinner in the button.
    .js-spinning-form {
      .form-item,
      .shipping-address {
        opacity: .2;
        pointer-events: none;
      }
    
      .button {
        pointer-events: none;
      }
    
      .button:not([type='cancel']) {
        position: relative;
        height: 50px;
        color: transparent;
        line-height: 0;
      }
    
      .icon--spinner {
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
        margin: auto;
        color: transparent;
        z-index: 2;
        fill: $color-white;
        animation: rotate 1s linear infinite;
      }
    }
    
  • URL: /components/raw/spinner/spinner.scss
  • Filesystem Path: src/components/01-elements/spinner/spinner.scss
  • Size: 1.6 KB

To use this component, add it to the bottom of a containing element on page load. When the spinner should be visible, such as between a form submission and successful Ajax response, add a js-spinning class to the container. This will partially block the visibility of the container and center the spinner on top of it. A js-show class can also be toggled directly on the spinner to directly control its visibility.