Last active
March 17, 2016 16:04
-
-
Save frecklebit/4260418 to your computer and use it in GitHub Desktop.
A CodePen by Adam Jenkins. Animated CSS Loader - Here I'm using CSS3 animation to create a fancy loader.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Animated CSS Loader</h1> | |
<div class="bubbles"> | |
<span></span> | |
<span id="bubble2"></span> | |
<span id="bubble3"></span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
@import url('http://fonts.googleapis.com/css?family=Gafata'); | |
/* Colors */ | |
$bg: #FDF6E3; | |
$text: #A75F63; | |
$terra-rosa: #FE576C; | |
/* Mixins */ | |
@mixin border-radius($radius) { | |
border-radius: $radius; | |
-moz-border-radius: $radius; | |
-webkit-border-radius: $radius; | |
} | |
/* Styles */ | |
html, body { | |
background: $bg; | |
text-align: center; | |
margin: 20px 0; | |
} | |
h1 { | |
font-family: 'Gafata', 'Lucida Grande', Tahoma, Verdana, sans-serif; | |
font-size: 2.1875rem; | |
font-weight: 100; | |
color: $text; | |
text-shadow: 0 1px 1px white; | |
} | |
.bubbles span { | |
display: inline-block; | |
vertical-align: middle; | |
width: 15px; | |
height: 15px; | |
margin: 150px auto; | |
background: $terra-rosa; | |
@include border-radius(50%); | |
animation: bubbly .9s infinite alternate; | |
} | |
/* Bubbles */ | |
#bubble2 { animation-delay: .27s; } | |
#bubble3 { animation-delay: .54s; } | |
@-webkit-keyframes bubbly { | |
0% { | |
width: 15px; | |
height: 15px; | |
opacity: 1; | |
transform: translateY(0); | |
} | |
100% { | |
width: 50px; | |
height: 50px; | |
opacity: 0.1; | |
transform: translateY(-32px); | |
} | |
} | |
@-moz-keyframes bubbly { | |
0% { | |
width: 15px; | |
height: 15px; | |
opacity: 1; | |
transform: translateY(0); | |
} | |
100% { | |
width: 50px; | |
height: 50px; | |
opacity: 0.1; | |
transform: translateY(-32px); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment