css loading animation

How we can create a simple loading screen animation using  CSS? Solution: CSS Loading Screen Animation, GIF Type Preloader. Many peoples say it Loader GIF.

Maybe you have seen, too many types of loading screen animation before. There are many kinds of preloaders, there are cubic, circle, & progress bar, etc available. Nowadays many peoples using their logo as loader screen. The loading screen is for websites pages, not for the blog. But many peoples also use on the blog. I prefer to blog with the fast loading speed, that’s why I am saying that.

Today you will know how to create a simple loading screen using HTML & CSS. If you want to put it on your websites as a preloader, then you have to use JavaScript. This is just a UI, and in this loading screen, there are 4 circles moving in order infinite.  That’s is the whole concept, I said before this is a simple and basic loading screen using CSS & HTML.

So, Today I am sharing CSS Loading Screen Animation with moving circles. One of my visitors ask me to create a Loading GIF, Now I understood which he was talking about. This is a beginner level thing, You can create it easily after seeing this post & understand the method.

If are you thinking now, how this basic loader animation is actually is, then see the preview given below.

Preview Of GIF Type Preloader

See this video preview to getting an idea of how this looks like.

Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

CSS Loading Screen Animation Source Code

Before sharing source code, let’s talk about it. As you know this is a basic loading screen example with source code. First, I created a div with class= "loader" and put 4 divs inside it. You can also put the span inside according to your choice. And gave class name dots for all 4 divs.

Now is CSS, I put absolute position an 50% from top and left in loader divs property. Margin places it in the center of the screen. Then I gave style to 4 dots, selected by using :nth-child() property.  After that, I put different animation delay  (get info) for each dots or circles. For creating circle I put padding: 10px and border-radius: 50%; properties.

After that, created an animation using @keyframe. In keyframe section I changed they opacity values, opacity 0 in 0%, opacity 1 in 50%, & 0 again in 100%. And in dots section I put this animation with ease-in-out and infinite value, That’s why its repeat.

For creating this loader screen you have to create only 2 files. One for HTML, and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

That’s It. Now you have successfully created a CSS Loading Screen Animation. In other words, the Animated GIF Type Loader Using HTML & CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

6 COMMENTS

    • Then you have to add JavaScript.
      Try this..

      // Add specific CSS class by filter
      add_filter( 'body_class', 'my_class_names' );
      function my_class_names( $classes ) {
      // add 'class-name' to the $classes array
      $classes[] = 'preloader-visible';
      // return the $classes array
      return $classes;
      }

      // Add preloader style
      add_action('wp_head', function(){ ?>



      If I can help you then massage me on facebook - https://www.facebook.com/webdevtrick/

LEAVE A REPLY

Please enter your comment!
Please enter your name here