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

I was a bit surprised though - most of the answers were JavaScript-based or css ones were in my opinion a bit overcomplicated (e.g. this one).

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:

Loading

You can also check it on codepen.

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!

-- ł.