<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
This Pen doesn't use any external JavaScript resources.