<div class="spinner spinner--dark">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="{{ class|join(' ') }}"><div></div><div></div><div></div><div></div></div>
{
  "class": [
    "spinner",
    "spinner--dark"
  ]
}
  • Content:
    .spinner {
      display: inline-block;
      position: relative;
      width: 1.25em;
      height: 1.25em;
    
      div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 1em;
        height: 1em;
        margin: 0.125em;
        border: 0.125em solid $brand-yellow;
        border-radius: 50%;
        animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: $brand-yellow transparent transparent transparent;
    
        &:nth-child(1) {
          animation-delay: -0.45s;
        }
    
        &:nth-child(2) {
          animation-delay: -0.3s;
        }
    
        &:nth-child(3) {
          animation-delay: -0.15s;
        }
      }
    
      &--dark {
        div {
          border: 0.125em solid $brand-grey;
          border-color: $brand-grey transparent transparent transparent;
        }
      }
    }
    
    @keyframes spinner {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  • URL: /components/raw/spinner/spinner.scss
  • Filesystem Path: src/components/01-elements/spinner/spinner.scss
  • Size: 861 Bytes

No notes defined.