Simple CSS Loading Animation

Loading

Loading is an important part of the web. There was a huge shift in web from serving just HTML pages from server for every user actions to just serving JSON data with dynamic HTML in the client side. It’s clear that the latter is better.

Every solution breeds new problems. — Arthur Bloch

So the problem is there are so many blocks in a page which updates using by making request. So the UI can’t just show wrong/old data or something blank while waiting for response. To keep the UI more interactive some kind of loading visualization is required. So 😃 this article is about creating a simple loading view which can be added to any part of UI just by toggling a CSS class.

End Goal

As i said adding a CSS class should change the UI from first to the other one. So lets start. You can follow along using the below code pen.

Starting Template

So we have a div with some text content and a button which will toggle the class loader. The div has style of height, width and background color.

<button onclick="addLoaderClass()">Add Loading Animation</button>
<div class="container">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.        Laboriosam excepturi quis dignissimos ab quisquam ducimus eos quo error odio doloremque. Assumenda, facilis eligendi ut saepe optio rerum vitae cupiditate quam.</div>
</div>
<style>
.container {
  height: 400px;
  background-color: lightblue;
  width: 500px;
}
</style>
<script>
function addLoaderClass() {
  const container = document.getElementsByClassName('container')[0];
  if(container.classList.contains('loader')) {
    container.classList.remove('loader');
  } else {
    container.classList.add('loader');
  }
}
</script>

First Trick — PSEUDO ELEMENTS

So lets start by understanding Pseudo classes, Pseudo elements and it’s difference. Pseudo classes are used to style the elements when they are in certain state. Here by state i mean Hover, Focus, Full Screen etc. Pseudo elements are similar to Pseudo classes but style certain part of the element. Here by certain part i mean First Letter, First Line, Selection. So now we’re going to use ::after Pseudo element.

::after is a Pseudo element which can be used add extra content to a element. For example if you want to add * to all required fields in a form, you can use it. In our use case both ::after and ::before should work fine.

So lets create a class with Pseudo element called .loader::after{} . For after to work we need to add property called content which takes string or media as input. So let add content with a string loading…

.loader{
}
.loader::after {
  content: 'Loading...';
}

Now if you add this class to an element you’ll be seeing the text at bottom of the element. Lets style it.

Second Trick — Positioning

So let position the text absolutely so that we can get the desired out come.

.loader::after{
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
}

Now the text goes somewhere above. So to make this work we want the parent to be relatively positioned which can be done by adding position: relative; But what is the parent of the pseudo element? Does after means, after the current element or after all the child elements. Well lets have a look at DevTools.

DevTools displaying ::after

So now we know that the latter is true. So we’ve to set the position relative to the actual element where we’re adding the loader class.

.loader {
  position: relative;
}
.loader::after {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
}

Now the text moves inside the container. As part of this lets add some color to make it look good. Also make it take full space.

.loader::after {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  color: white;
  height: 100%
  width: 100%
}

I’m using rgba so that i can control the opacity. Now lets center the Text.

Third Trick — Aligning content

Well this is a simple thing, just set the text-align: center; and vertical-align: middle; But vertical align might not work here. So lets use the flex box 😍. So we’ll set the display property to Flex and justify, align content to center.

.loader::after {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  color: white;
  height: 100%
  width: 100%
  display: flex;
  justify-content: center;
  align-items: center;
}

Completed Pen

That’s it we’ve reached our end goal. Now this CSS class can be dynamically toggled in the element loading. Now this can be improved in many ways like

• Add a spinner image/GIF/SVG as background image to show determined or undetermined progress updates.
• Update the content text dynamically to show user what exactly is happening behind or just ask them to Breath…In…Breath…Out.
• Have both Image and text

Will this work in all scenarios — No. It works only when the container is relatively positioned. Can this be improved to work all scenarios — Your imagination is the Limit.

Conclusion

Well this is my first article, so please go easy on me 😅. For people who found it useful please let me know by sending some claps or adding a comment which’ll motivate me to blog more. Thank you for staying with me till the end. 😃

“From what we get, we can make a living; what we give, however, makes a life.” ~ Arthur Ashe