<div class="loader">
    <div class="duo duo1">
        <div class="dot dot-a"></div>
        <div class="dot dot-b"></div>
    </div>
    <div class="duo duo2">
        <div class="dot dot-a"></div>
        <div class="dot dot-b"></div>
    </div>
</div>
<div class="loader">
  <div class="duo duo1">
    <div class="dot dot-a"></div>
    <div class="dot dot-b"></div>
  </div>
  <div class="duo duo2">
    <div class="dot dot-a"></div>
    <div class="dot dot-b"></div>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .loader {
      position: relative;
      margin: 100px auto;
      width: 80px;
    }
    
    .duo {
      position: absolute;
      background: none;
      width: 50px;
      height: 20px;
    
    }
    
    .duo,
    .dot {
      animation-duration: .8s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    
    .duo1 {
      left: 0;
      animation-name: spin;
    
      .dot-a {
        animation-name: onOff;
        animation-direction: reverse;
        opacity: 0;
    	}
    }
    
    
    .duo2 {
      left: 30px;
      animation-name: spin;
      animation-direction: reverse;
    
      .dot-b {
        animation-name: onOff;
    	}
    }
    
    
    .dot {
      position: absolute;
      border-radius: 10px;
      background: $brand-red;
      width: 20px;
      height: 20px;
    
    
    }
    
    .dot-a {
      left: 0;
    }
    
    .dot-b {
      right: 0;
    }
    
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
    
      50% {
        transform: rotate(180deg);
      }
    
      100% {
        transform: rotate(180deg);
      }
    }
    
    @keyframes onOff {
      0% {
        opacity: 0;
      }
    
      49% {
        opacity: 0;
      }
    
      50% {
        opacity: 1;
    	}
    
      100% {
        opacity: 1;
    	}
    }
    
  • URL: /components/raw/waiting-dots/_waiting-dots.scss
  • Filesystem Path: components/01-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss
  • Size: 989 Bytes
  • Handle: @waiting-dots
  • Preview:
  • Filesystem Path: components/01-atoms/visual-elements/animation/waiting-dots/waiting-dots.html

There are no notes for this item.