# Waiting Dots

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/visual-elements/animation/waiting-dots/waiting-dots.html

No notes defined.