Forked from John Brooks's Pen Loading Animation.
A Pen by Jaythan Elam on CodePen.
<div class="loader">Generating Bubbl</div> |
Forked from John Brooks's Pen Loading Animation.
A Pen by Jaythan Elam on CodePen.
body { | |
background: #082648; | |
color: #ccc; | |
font-family: Montserrat, sans-serif; | |
font-size: 14px; | |
letter-spacing: 1px; | |
color: #00ffbb; | |
} | |
.loader { | |
width: 200px; | |
height: 200px; | |
line-height: 200px; | |
margin: 100px auto; | |
position: relative; | |
box-sizing: border-box; | |
text-align: center; | |
z-index: 0; | |
text-transform: uppercase; | |
} | |
.loader:before, | |
.loader:after { | |
opacity: 0; | |
box-sizing: border-box; | |
content: "\0020"; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
border-radius: 100px; | |
border: 2px solid #00ffbb; | |
box-shadow: 0 0 50px #00ffbb, inset 0 0 50px #00ffbb; | |
} | |
.loader:after { | |
z-index: 1; | |
-webkit-animation: gogoloader 2s infinite 1s; | |
} | |
.loader:before { | |
z-index: 2; | |
-webkit-animation: gogoloader 2s infinite; | |
} | |
@-webkit-keyframes gogoloader { | |
0% { | |
-webkit-transform: scale(0); | |
opacity: 0; | |
} | |
50% { | |
opacity: 1; | |
} | |
100% { | |
-webkit-transform: scale(1); | |
opacity: 0; | |
} | |
} |