Ajax Loader
×
HTML 
<div class="blobs">
1
<div class="blobs">
2
  <div class="blob"></div>
3
  <div class="blob"></div>
4
</div>
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
//lucasbebber
 
CSS 
body {
1
body {
2
  background:black;
3
  }
4
 
5
.blobs {
6
  position: absolute;
7
  top: 50%;
8
  left: 50%;
9
  transform: translate(-50%, -50%);
10
  background: black;
11
  width: 400px;
12
  height: 200px;
13
  -webkit-filter: blur(16px) contrast(40);
14
  filter: blur(16px) contrast(40);
15
}
16
 
17
.blob {
18
  background: #f06d06;
19
  width: 100px;
20
  height: 100px;
21
  position: absolute;
22
  left: 50%;
23
  top: 50%;
24
  margin-top: -50px;
25
  margin-left: -50px;
26
  border-radius: 100%;
27
          &:before {
28
    content: " ";
29
    position: absolute;
30
    background: black;
31
    }
32
}
33
34
 
35
@keyframes blob-anim-left {
36
  0% {
37
    transform: translateX(-10px);
38
  }
39
  100% {
40
    transform: translateX(-55px);
41
    animation-timing-function: ease-out;
42
background:rgba(red,0.95);
43
  }
44
}
45
 
46
.blob:first-child {
47
  animation: blob-anim-left 0.8s cubic-bezier(.14, .75, .2, 1.01) infinite alternate;
48
      &:before {
49
left:0;
50
    }
51
}
52
 
53
@keyframes blob-anim-right {
54
  0% {
55
    transform: translateX(10px);
56
  }
57
  100% {
58
    transform: translateX(55px);
59
    animation-timing-function: ease-out;
60
background:rgba(red,0.95);
61
  }
62
}
63
 
64
.blob:last-child {
65
  animation: blob-anim-right 0.8s cubic-bezier(.14, .75, .2, 1.01) infinite alternate;
66
          &:before {
67
right:0;
68
    }
69
}
70
 
71
@keyframes before-blob {
72
  0% {
73
width:0;height:0;
74
  }
75
  100% {
76
width:16px;height:36px;
77
  }
78
}
79
 
80
.blob:before {
81
  animation: before-blob 0.8s cubic-bezier(.14, .75, .2, 1.01) infinite alternate;
82
}
83
 
 

Untitled

CSSDeck G+