How to Create Loading Animation in CSS?

Leave a Comment / CSS, HTML / By

In this blog, you will learn to create Loading Animation in CSS. It helps us tell users to be patient as the content is loading and taking time. Let us know more about it in detail:-

 

Loading animations are used to tell users that the system is not crashed instead it is taking some time to load. It helps the user to be patient and keeps them entertained.

Loading animation in css

In this loading animation code firstly the animation will run for 3 seconds and then the whole text will appear on the screen. You can change the animation time according to your choice. The Code and Output for it are:- 

Index.html

<!DOCTYPE html>
<html>

 

<head>
  <title> loading animation in css </title>
  <style>
    #loader {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 120px;
      height: 120px;
      margin: -76px 0 0 -76px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      -webkit-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }

 

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

 

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

 

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

 

      100% {
        transform: rotate(360deg);
      }
    }

 

    .animate-bottom {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

 

    @-webkit-keyframes animatebottom {
      from {
        bottom: -100px;
        opacity: 0
      }

 

      to {
        bottom: 0px;
        opacity: 1
      }
    }

 

    @keyframes animatebottom {
      from {
        bottom: -100px;
        opacity: 0
      }

 

      to {
        bottom: 0;
        opacity: 1
      }
    }

 

    #myDiv {
      display: none;
      text-align: center;
    }
  </style>
</head>

 

<body onload=”myFunction()” style=”margin:0;”>

 

  <div id=”loader”></div>
  <div id=”myDiv” class=”animate-bottom”>
    <h2> Codeblockx </h2>
    <p> Solution for all Coding Problems </p>
  </div>

 

  <script>
    var myVar;
    function myFunction() {
      myVar = setTimeout(showPage, 3000);
    }
    function showPage() {
      document.getElementById(“loader”).style.display = “none”;
      document.getElementById(“myDiv”).style.display = “block”;
    }
  </script>
</body>

 

</html>

OUTPUT

Loader image in css
Loading in CCS

Thank you for visiting our blog. We hope you have found the answer to your question. As you are now learned about loading animation you should now learn about Blink Animation in CSS. Check it out we have a detailed blog post on it and it will be helpful to you. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. 

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *