Pure CSS potion loader, learn to make CSS images here:
https://medium.com/dailycssimages/a-beginners-guide-to-pure-css-images-ef9a5d069dd2#.eqzaeotl7
A Pen by Mike Mangialardi on CodePen.
.box | |
.container | |
.glass | |
.cap-left | |
.cap-right | |
.fill | |
.bubble-1 | |
.bubble-2 | |
.bubble-3 | |
.bubble-4 | |
.bubble-5 | |
.bubble-6 | |
Pure CSS potion loader, learn to make CSS images here:
https://medium.com/dailycssimages/a-beginners-guide-to-pure-css-images-ef9a5d069dd2#.eqzaeotl7
A Pen by Mike Mangialardi on CodePen.
body{ | |
background: #18212A; | |
} | |
.box{ | |
position: relative; | |
background: none; | |
width: 600px; | |
height: 400px; | |
display: block; | |
margin: auto; | |
margin-top: 5%; | |
} | |
.container{ | |
position: absolute; | |
width: 40%; | |
height: 50%; | |
background: none; | |
top: 25%; | |
left: 30%; | |
} | |
.glass{ | |
position: absolute; | |
height: 80%; | |
width: 20%; | |
background: #B5F0E8; | |
opacity: 0.7; | |
top: 20%; | |
left: 40%; | |
border-bottom-left-radius: 50px; | |
border-bottom-right-radius: 50px; | |
z-index: 2; | |
} | |
.cap-left{ | |
position: absolute; | |
width: 50%; | |
height: 15%; | |
top: -15%; | |
background: #B9661C; | |
} | |
.cap-right{ | |
position: absolute; | |
width: 50%; | |
height: 15%; | |
top: -15%; | |
right: 0%; | |
background: #9A501D; | |
} | |
.fill{ | |
position: absolute; | |
height: 90%; | |
width: 80%; | |
background: #DA0000; | |
opacity: 0.8; | |
bottom: 5%; | |
left: 10%; | |
border-bottom-left-radius: 50px; | |
border-bottom-right-radius: 50px; | |
animation: slime 1.5s infinite; | |
z-index: 1; | |
} | |
.bubble-1{ | |
position: absolute; | |
height: 10%; | |
width: 35%; | |
top: 10%; | |
left: 15%; | |
border-radius: 50%; | |
background: #bf0303; | |
} | |
.bubble-2{ | |
position: absolute; | |
height: 8%; | |
width: 33%; | |
top: 25%; | |
right: 15%; | |
border-radius: 50%; | |
background: #bf0303; | |
} | |
.bubble-3{ | |
position: absolute; | |
height: 10%; | |
width: 35%; | |
top: 40%; | |
left: 15%; | |
border-radius: 50%; | |
background: #bf0303; | |
} | |
.bubble-4{ | |
position: absolute; | |
height: 8%; | |
width: 33%; | |
top: 55%; | |
right: 15%; | |
border-radius: 50%; | |
background: #bf0303; | |
} | |
.bubble-5{ | |
position: absolute; | |
height: 8%; | |
width: 33%; | |
top: 75%; | |
left: 15%; | |
border-radius: 50%; | |
background: #bf0303; | |
} | |
//animations | |
@keyframes slime{ | |
0%{ | |
height: 0%; | |
} | |
10%{ | |
height: 10%; | |
} | |
15%{ | |
height: 15%; | |
} | |
20%{ | |
height: 20%; | |
} | |
25%{ | |
height: 25%; | |
} | |
30%{ | |
height: 30%; | |
} | |
35%{ | |
height: 35%; | |
} | |
40%{ | |
height: 40%; | |
} | |
45%{ | |
height: 45%; | |
} | |
50%{ | |
height: 50%; | |
} | |
55%{ | |
height: 55%; | |
} | |
60%{ | |
height: 60%; | |
} | |
65%{ | |
height: 65%; | |
} | |
70%{ | |
height: 70%; | |
} | |
75%{ | |
height: 75%; | |
} | |
80%{ | |
height: 80%; | |
} | |
85%{ | |
height: 85%; | |
} | |
90%{ | |
height: 90%; | |
} | |
95%{ | |
height: 92%; | |
} | |
100%{ | |
height: 93%; | |
} | |
} |