CSS Loading

CSS Loading

CSS Loading

index.html

<div class="wrapper">
    <div class="circle circle-1"></div>
    <div class="circle circle-1a"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
  </div>
  <h1>Loading&hellip;</h1>

style.css

    @import url(https://fonts.googleapis.com/css?family=Oswald);
    * {
      box-sizing: border-box;
    }
    body {
      background-color: #FFD110;
      font-family: 'Oswald', sans-serif;
      font-size: 100%;
      margin: 0;
      text-align: center;
    }
    .wrapper {
      height: 50px;
      margin-top: calc(50vh - 25px);
      margin-left: calc(50vw - 100px);
      width: 180px;
    }
    .circle {
      border-radius: 50%;
      border: 3px #0a0a0a solid;
      float: left;
      height: 50px;
      margin: 0 5px;
      width: 50px;
    }
      .circle-1 {
        animation: move 1s ease-in-out infinite;
      }
      .circle-1a {
        animation: fade 1s ease-in-out infinite;
      }
      @keyframes fade {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }
      .circle-2 {
        animation: move 1s ease-in-out infinite;
      }
      @keyframes move {
        0% {transform: translateX(0);}
        100% {transform: translateX(60px);}
      }
      .circle-1a {
        margin-left: -55px;
        opacity: 0;
      }
      .circle-3 {
        animation: circle-3 1s ease-in-out infinite;
        opacity: 1;
      }
      @keyframes circle-3 {
        0% {opacity: 1;}
        100% {opacity: 0;}
      }

    h1 {
      color: #222;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.05em;
      margin: 40px auto;
      text-transform: uppercase;
    }