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; }