<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. */
  • Content:
    .loader {
      position: relative;
      width: 80px;
      margin: 100px auto;
    }
    
    .duo {
      position: absolute;
      width: 50px;
      height: 20px;
      background: none;
    }
    
    .duo,
    .dot {
      animation-duration: 0.8s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    
    .duo1 {
      left: 0;
      animation-name: spin;
    
      .dot-a {
        opacity: 0;
        animation-name: on-off;
        animation-direction: reverse;
      }
    }
    
    .duo2 {
      left: 30px;
      animation-name: spin;
      animation-direction: reverse;
    
      .dot-b {
        animation-name: on-off;
      }
    }
    
    .dot {
      position: absolute;
    
      width: 20px;
      height: 20px;
    
      background: $dot-color;
      border-radius: 10px;
    }
    
    .dot-a {
      left: 0;
    }
    
    .dot-b {
      right: 0;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
    
      50% {
        transform: rotate(180deg);
      }
    
      100% {
        transform: rotate(180deg);
      }
    }
    
    @keyframes on-off {
      0% {
        opacity: 0;
      }
    
      49% {
        opacity: 0;
      }
    
      50% {
        opacity: 1;
      }
    
      100% {
        opacity: 1;
      }
    }
    
  • URL: /components/raw/waiting-dots/_waiting-dots.scss
  • Filesystem Path: components/05-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss
  • Size: 993 Bytes
  • Handle: @waiting-dots
  • Preview:
  • Filesystem Path: components/05-atoms/visual-elements/animation/waiting-dots/waiting-dots.html

No notes defined.