Loading Spinner

on

 

Loading Spinner

Hy Guys, today we are going to create a loading spinner. Spinner is used to show the Loading of website or content.

How is works?

Working is so simple for loading spinner. In HTML we have created a 

<div class="loadingSpinner">

in Css we had make it's radius 50% to make it a circle and give a different color to top border then used simple animation to rotate it 360deg, so it looks like it is rotating.

Create two files index.html and style.css

Here is the code:

index.html

<!DOCTYPE html>
<head>
<title>Loading Spinner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loadingSpinner"></div>
</body>

</html>


style.css

.loadingSpinner {
  pointer-events: none;
  width: 3em;
  height: 3em;
  border: 0.4em solid transparent;
  border-color: #ddd;
  border-top-color: blue;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}
@keyframes spinner {
  100% {
    transform: rotate(360deg);
  }

}


Hope You Like it!

Code is also available on Github Click Here!

Thanks You

Comments

Post a Comment