Blog

You are currently viewing How to Create a CSS Page Loading Spinner – Web Design Tutorial
How to Create a CSS Page Loading Spinner - Web Design Tutorial

How to Create a CSS Page Loading Spinner – Web Design Tutorial

Hey guys todays we will learn how to make CSS loading spinner on website. We will make two different files one is for html and one is for css . This loader is made with css only you don’t need to write any javascript for it . So lets start How to Create a CSS Page Loading Spinner .

HTML:

This is the element part which will help you to make your skeleton of the loading page.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@codewith_muhilan</title>
  <link rel="stylesheet" href="mystyle.css">
  
</head>

<body>
  <div class="loader"></div>
</body>

</html>

CSS:

For animation part for Loader we have to write the css styling . 

body
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20%;
  background-color: #0E1218;
}
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  aspect-ratio: 1;
  background: 
    radial-gradient(farthest-side at top,#0000 calc(100% - 21px),#FFA361 calc(100% - 20px) 99%,#0000) bottom/100% 50%,
    radial-gradient(farthest-side,#FFA361 94%,#0000 ) left /20px 20px,
    radial-gradient(farthest-side,#FFA361 94%,#0000 ) right/20px 20px;
  background-repeat: no-repeat;
  position: relative;
}
.loader::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  inset: auto 0 0;
  margin: auto;
  border-radius: 50%;
  background: #F8EF4A;
  transform-origin: 50% -20px;
  animation: l14 1s infinite cubic-bezier(0.5,623,0.5,-623);
}
@keyframes l14 { 
 100% {transform: rotate(0.5deg)}
}

Conclusion:

We have successfully build this weather application using react js and we have used many technologies in it . To build this react js weather application . i hope you will love this tutorial get so many knowledge from this video. I’m hoping you’ll create this application effectively and get a lot of knowledge from it. We designed this project as a beginner project, but in the future days we will cover more advanced projects as well.

People are also reading:

Tags: , , ,