When a website takes a while to load content, website visitors see a loading page. Loading pages are usually an animation, a spin icon, or a process bar. loading animations keep the visitor engaged while they wait for the page to load. short they make waiting less frustrating for the visitor. These animations need to be entertaining enough to keep the audience engaged. So today we will create a simple and attractive loader using simple CSS properties and keyframes.

During web development, why would you use CSS loading animations? Because you can use a GIF, SVG, or video loader to create a loading animation. But choosing CSS loading animations offers many advantages over other loading methods. For example:

Performance loss: Using GIF or video for the loading page take the time to load.

Easy to customize: It is much easier to change the animation duration, curve, color, etc. with CSS than with video or GIF gives you better control.

Provide high quality: GIF loaders can show screen blur when zoomed in or in high quality instead of CSS. You don't have to face this problem if you use CSS.

Today we will learn to create an interesting text loader animation. The trick here is to use some simple CSS properties like correct perspective and rotate.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.

HTML:

At the beginning of the HTML, we will create a DIV element with the 'loader' class. This will act as the main container for our other elements. Then we will create 7 span elements for each of the 7 letters of 'LOADING'.

<div class="loader">
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>

StyleSheet (CSS):

Styling Body:

Coming to the CSS code. Start by setting a nice shade of light black as the background of our loading page. But we left the background of the first one as default. The second time we will set the background again to a radial gradient. In short, if a browser does not support gradient, the default background color will be black.

After the background, our main task is to center the loader. We use the Flexbox method for centering. We have previously created a tutorial that show how to center any element, you can check it out here.

body {
  background: #141414;
  background: radial-gradient(ellipse at center, #706e6e, #141414);
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: fantasy;
}
Adding 3D effect:

We use perspective CSS property to create a 3D effect in our animation. Remember that the lower the value of perspective CSS property, the more intense the 3D effect will be.


.loader {
  -webkit-perspective:700px;
  perspective: 700px;
}
Adding Animation:

We always use these common CSS properties, such as font size, font family, display, etc. But here are some key points that you need to know. Here we set the transform origin to 0 70%. Which simply means that all our animations will appear or be centered 70% from the top in these span elements. We set the transform style to preserve3D so that the animation does not look parallel.

The most important part of the code is the animation. We want the animation to happen repeatedly, so we set the interact count of the animation to infinite. We set the animation duration to 2.6 second.

.loader > span {
  font-size: 130px;
  display: inline-block;
  animation: flip 2.6s infinite linear;
  transform-origin: 0 70%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
   color: #00b376;
}
Adding delay:

We set each of the alternate characters in the 'LOADING' element to white using the '.loader > span:nth-child(even)' selector. This creates alternate green and white characters.

We need to flip the characters one after the other perfectly. To do this, we will add a small progressive delay to each span element. Here, we are using a delay in steps of .3 second.


.loader > span:nth-child(even) {
  color:white;
}

.loader > span:nth-child(2) {
  animation-delay: 0.3s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.6s;
}

.loader > span:nth-child(4) {
  animation-delay: 0.9s;
}

.loader > span:nth-child(5) {
  animation-delay: 1.2s;
}

.loader > span:nth-child(6) {
  animation-delay: 1.5s
}

.loader > span:nth-child(7) {
  animation-delay: 1.8s
}
Setting Up the Keyframes:

It is not enough to just add the animation. You also need to create how the animation will work. Keyframes are needed to run the animation. We need keyframes to flip the characters twice on the horizontal axis. For this, let's add a transform rotateX (360deg) of 35% and 100%, so that the first flip is faster than the second flip.

@keyframes flip {
  35% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotatex(360deg);
  }
}

Answering one of the common questions, ‘Why do we use loading page?’
– When a website take a long time to load, a blank screen can make the user think website is down. Adding a loading animation will tell them that the site is loading.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube.

Tags

Post a Comment

إرسال تعليق

أحدث أقدم