circleLoading.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div class="Loader">

    <div class="circle-outside">

        <div class="circle-inside"></div>

    </div>
    <span>Loading</span>
  </div>


</body>
</html>



style.css

body{

  background-color: rgb(34, 32, 32);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loader{


  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

}

.circle-outside{

width: 150px;
height: 150px;
padding: 3px;
border-radius: 50%;
background:linear-gradient(rgba(87,133,240,0.1) 40%,rgb(58,16,173) 100%);
animation: spin 1s linear infinite;
}

.circle-inside{

  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(34, 32, 32);
}

span{

  position: absolute;
  font-size: 25px;
  color: aqua;
  animation: fadeIn 1s linear infinite;
}


@keyframes spin{

  from{

    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}


@keyframes fadeIn{

  from{

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




 View of Loader






Video Link 






Check out my YouTube channel for more such videos :

https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber


Follow me on my facebook page

https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour










Post a Comment

Previous Post Next Post