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;
}
Subscribe
0 Comments