Created
August 11, 2017 10:10
-
-
Save shortthirdman/e77309422149d2b668e386a29a1c7d54 to your computer and use it in GitHub Desktop.
Loading Waiting dots using CSS 3
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
<div class="waiting-dots"> | |
Loading Application<span>.</span><span>.</span><span>.</span> | |
</div> | |
<style> | |
@keyframes blink { | |
/** | |
* At the start of the animation the dot | |
* has an opacity of .2 | |
*/ | |
0% { | |
opacity: .2; | |
} | |
/** | |
* At 20% the dot is fully visible and | |
* then fades out slowly | |
*/ | |
20% { | |
opacity: 1; | |
} | |
/** | |
* Until it reaches an opacity of .2 and | |
* the animation can start again | |
*/ | |
100% { | |
opacity: .2; | |
} | |
} | |
.waiting-dots span { | |
/** | |
* Use the blink animation, which is defined above | |
*/ | |
animation-name: blink; | |
/** | |
* The animation should take 1.4 seconds | |
*/ | |
animation-duration: 1.4s; | |
/** | |
* It will repeat itself forever | |
*/ | |
animation-iteration-count: infinite; | |
/** | |
* This makes sure that the starting style (opacity: .2) | |
* of the animation is applied before the animation starts. | |
* Otherwise we would see a short flash or would have | |
* to set the default styling of the dots to the same | |
* as the animation. Same applies for the ending styles. | |
*/ | |
animation-fill-mode: both; | |
} | |
.waiting-dots span:nth-child(2) { | |
/** | |
* Starts the animation of the third dot | |
* with a delay of .2s, otherwise all dots | |
* would animate at the same time | |
*/ | |
animation-delay: .2s; | |
} | |
.waiting-dots span:nth-child(3) { | |
/** | |
* Starts the animation of the third dot | |
* with a delay of .4s, otherwise all dots | |
* would animate at the same time | |
*/ | |
animation-delay: .4s; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment