<div id="wrapper">
  <div id="mouse"></div>
  <div class="loader">
  </div>
  <div class="loading-bar">
    <div class="progress-bar"></div>
  </div>
  <div class="status">
    <div class="state"></div>
    <div class="percentage"></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:600');

*{
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
  box-sizing:border-box;
  animation-timing-function:ease;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
}

#wrapper{
  position:relative;
  width:350px;
  animation:out .3s forwards ease;
  animation-delay:5s;
  transform:scale(1);
  opacity:1;
  transform-origin:center -80%;
  
  
  @keyframes out{
    0%{
      transform:scale(1);
      opacity:1;
    }
    100%{
      transform:scale(0);
      opacity:0;
    }
  }
  
  .loader{
    animation: rotation 3.5s forwards linear;
    position:absolute;
    top:-120px;
    left:calc(50% - 35px);
    border: 5px solid #fff;
    border-radius: 50%;
    border-top-color: #a29bfe;
    height: 70px;
    width: 70px;
    display:flex;
    justify-content:center;
    align-items:center;
    
    @keyframes rotation {
      0% {
        transform: rotate(0);
      }
      84% {
        transform: rotate(500deg);
      }
      95%{
        border: 5px solid #fff;
        border-top-color: #a29bfe;
      }
      100%{
        transform: rotate(1800deg);
        border: 5px solid #2ed573;
      }
    }
    
    &:before{
      content:"\f00c";
      font-family:"Font Awesome 5 Free";
      font-weight:900;
      font-size:2em;
      color:#2ed573;
      animation:overspin .5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation-delay: 3.4s;
      transform:rotate(180deg);
      opacity:0;
      
      @keyframes overspin{
        0%{
          transform:rotate(180deg);
          opacity:0;
        }
        100%{
          transform:rotate(0);
          opacity:1;
        }
      }
    }
  }
  
  #mouse{
    position:absolute;
    top:100px;
    left:80%;
    animation:mouse-pos 3.5s forwards, mouse-pos2 1s forwards;
    animation-delay:0s, 4s;
    z-index:20;
    
    @keyframes mouse-pos{
      30%{
        top:100px;
        left:80%;
      }
      50%{
        top:15px;
        left:4%;
      }
      60%{
        top:15px;
        left:4%;
      }
      75%{
        top:5px;
        left:7.3%;
      }
      85%{
        top:5px;
        left:7.3%;
      }
      95%{
        top:15px;
        left:105%;
      }
      100%{
        top:15px;
        left:105%;
      }
    }
    
    @keyframes mouse-pos2{
      0%{
        top:15px;
        left:105%;
      }
      100%{
        top:-85px;
        left:53%;
      }
    }
    
    &:after{
      content:"\f245";
      position:absolute;
      top:0;
      left:0;
      font-family:"Font Awesome 5 Free";
      font-weight:900;
      font-size:20px;
      animation:mouse-cont 2s forwards;
      animation-delay:1.7s;
      color:#341f97;
      text-shadow:0 1px 10px rgba(0,0,0,0.3);
      
      @keyframes mouse-cont{
        0%{
          font-size:20px;
        }
        2%{
          font-size:15px;
        }
        4%{
          font-size:20px;
        }
        33%{
          content:"\f245";
        }
        34%{
          content:"\f337";
        }
        80%{
          content:"\f337";
        }
        81%{
          content:"\f245";
        }
      }
    }
    
    &:before{
      content:"";
      position:absolute;
      top:-22px;
      left:-24px;
      width:50px;
      height:50px;
      border-radius:50%;
      border:2px solid #222f3e;
      animation: circle 3.5s forwards;
      animation-delay:1.7s;
      opacity:0;
      transform:scale(0);
      
      // since adding the same animations 2 times resulted in a weird look of the circle, i created 1 animation with both animations in it.
      
      @keyframes circle{
        0%{
          transform:scale(0);
        }
        4%{
          opacity:1;
        }
        8%{
          transform:scale(1);
          opacity:0;
        }
        92%{
          transform:scale(0);
          opacity:0;
        }
        95%{
          opacity:1;
        }
        100%{
          transform:scale(1);
          opacity:0;
        }
      }
    }
  }
  
  .loading-bar{
    width:100%;
    height:30px;
    background:#dfe6e9;
    border-radius:5px;

    .progress-bar{
      animation:progress 3.5s forwards;
      width:6%;
      height:100%;
      background:#a29bfe;
      border-radius:5px;
      border:0 solid #0abde3;
      
      @keyframes progress{
        0%{
          width:6%;
        }
        50%{
          border:0 solid #0abde3;
        }
        51%{
          border:4px solid #0abde3;
        }
        85%{
          width:11%;
        }
        95%{
          border:4px solid #0abde3;
          width:100%;
        }
        100%{
          width:100%;
        }
      }
    }
  }
  
  .status{
    margin-top:10px;
    
    .state{
      float:left;
      font-size:0.9em;
      letter-spacing:1pt;
      text-transform:uppercase;
      width:100px;
      height:20px;
      position:relative;
      
      &:before{
        content:"Loading";
        position:absolute;
        left:0;
        top:0;
        animation: fadeLeft .5s forwards ease;
        animation-delay:3.2s;
        
        @keyframes fadeLeft{
          0%{
            text-indent:0;
            opacity:1;
          }
          100%{
            text-indent:-100px;
            opacity:0;
          }
        }
      }
      &:after{
        content:"Complete";
        position:absolute;
        left:0;
        top:0;
        text-indent:100px;
        opacity:0;
        animation: fadeLeft2 .5s forwards ease;
        animation-delay:3.2s;
        
        @keyframes fadeLeft2{
          0%{
            text-indent:100px;
            opacity:0;
          }
          100%{
            text-indent:0;
            opacity:1;
          }
        }
      }
    }
    
    .percentage{
      float:right;

      &:before{
        -webkit-animation: percentage-slow 3s forwards, percentage-fast .4s forwards;
        -webkit-animation-delay: 0s, 3s;
        content:"10%";
        font-size:0.9em;
        letter-spacing:1pt;

        @keyframes percentage-slow {
          0%{ content: "6%" }
          25%{ content: "7%" }
          50%{ content: "8%" }
          75%{ content: "9%" }
          100%{ content: "10%" }
        }

        @keyframes percentage-fast {
          @for $i from 11 through 100 {
            #{$i * 1%} {
              content: $i + '%';
            }
          }
        }
      }
    }
  }
}
View Compiled
// not necessary
Run Pen

External CSS

  1. https://use.fontawesome.com/releases/v5.6.1/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.