Page Loading Animation with CSS

In this article, we are creating page loading animation from scratch. In this tutorial, we just using CSS and HTML5. Well, CSS is mostly used language to create animation. In this article, we will show you how to create a simple page loading animation for your website.

page loading

So to create page loading animation in CSS you just need to create an empty project. To create an empty project you just need to create an empty file on your local computer and open this file in any text editor. In this tutorial, we are using the visual code editor. After creating the project follow these steps.

Create Index.html 

 The first thing you need to create is the index.html file. Create this file and insert the following code inside of this file.

Import this code in the index.html file.

  • In this code, we just created a simple HTML5 snippet.
  • After that, we link the style.css file to the project. we are using style file to create an animation.
  • In the index file create a simple container class inside the body tag. We are using the container to center the element.
  • In this container put the loader class. This class represents the page loading animation.
  • after this create the style.css file. In the same folder where you inserted index.html file.


Create style.css file insert the following code inside of it. Well, in this code we insert @keyframes and some CSS properties to make page looks better and also to create animation.

  • You will see we also created a body tag to add some background color. we are using gradient color to add in the background.
  • after that, we create the container class to center the element. We also inserted transform rotate property to rotate the container.
  • then we add loader class and add some stylesheet properties to make the page loader.
  • we also use the Pseudo selector to create the page loader.
  • After that, we create two keyframe one is for translating the element in the y-axis and one is for changing the color.
  • We use Slide_me animation to move the element. Transforming element to the y-axis will move the element to top and bottom.
  • And the Move animation is used to make a changing color of the circle.

Run the index.html file and see how it will work. This animation is very simple to create and execute. You can use this animation to showing the process of page loading.

That is all for this tutorial.

For more information follow us on youtube. Read more article on this website to understand programming.

Thank You.