Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Loading Animation
<div class="loader">Generating Bubbl</div>
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.