Ajax Loader
×
HTML 
<!--
1
<!--
2
autor: Marco Barría
3
https://twitter.com/marco_bf
4
-->
5
 
6
<div class="mouse"></div>
 
CSS 
$color: #fff;
1
$color: #fff;
2
 
3
.mouse {
4
  border: 2px solid $color;
5
  border-radius: 26px;
6
  position: absolute;
7
  top: 50%;
8
  left: 50%;
9
  width: 26px;
10
  height: 42px;
11
  -webkit-backface-visibility: hidden;
12
  transform: translate(-50%, -50%);
13
  &::after {
14
    background-color: $color;
15
    border-radius: 100%;
16
    content: "";
17
    position: absolute;
18
    top: 5px;
19
    left: 50%;
20
    margin-left: -2px;
21
    width: 4px;
22
    height: 4px;
23
    opacity: 1;
24
    transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
25
    animation: scroll 1.5s -1s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
26
  }
27
}
28
 
29
@keyframes scroll {
30
  0%, 20% {
31
    transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
32
  }
33
  10% {
34
    transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
35
    opacity: 1;
36
  }
37
  100% {
38
    transform: translateY(20px) scaleY(2.5) scaleX(0.5) translateZ(0px);
39
    opacity: 0.01;
40
  }
41
}
42
 
43
*,
44
*:after,
45
*:before {
46
  box-sizing: border-box;
47
}
48
 
49
html,
50
body {
51
  width: 100%;
52
  height: 100%;
53
}
54
 
55
body {
56
  background-color: #3e3947;
57
}
 

Untitled

CSSDeck G+