During this week I had to add loading indication without using any graphical assets. When browsing existing ideas I've decided to use just plain
Loading text with three animated dots (
...) after it.
It turned out (what a surprise) that someone already had similar issue and created a thread on stackoverflow about this.
Yeah, the title of this question is super intuitive :D
At this point (of course!) I've decided to try solve this by myself.
Going straight to the solution:
// HTML <p class='loading-paragraph'>Loading<span></span><p> // CSS (nested SASS) .loading-paragraph span &:before animation: dots 2s linear infinite content: '' @keyframes dots 0%, 20% content: '.' 40% content: '..' 60% content: '...' 90%, 100% content: ''
And the result:
Voila! It's that simple! You're welcome ;)
If you want to promote this solution - feel free to upvote my answer on stackoverflow ;)
And that's all folks! Happy coding!