CSS Loading Dots animation

using pure css we can create the loading text with animated three dots

very first we need to create the element as follows

<p class="loading">
   Saving<span>.</span><span>.</span><span>.</span>
</p>

@keyframes blinkdot {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}
.loading span {
    animation-name: blinkdot;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.loading span:nth-child(2) {
    animation-delay: .2s;
}
.loading span:nth-child(3) {
    animation-delay: .4s;
}
3.7 3 votes
Article Rating

by kushan


Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments