/CSS/How to add a pure css loading spinner

How to add a pure css loading spinner

.loader {
  width: 100%;
  margin: 50px auto;
  align-items: center;
  border: 7px solid #f3f3f3; /* Light grey */
  border-top: 7px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

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

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

Similar codes

0 vote151 views1 answer
How to use css print page break with float
CSS
0 vote144 views1 answer
Css animate border
CSS
5 votes180 views1 answer
Css how does hsl work
CSS
0 vote150 views1 answer
Css conver innertext to html using css
CSS
0 vote117 views1 answer
New margin property css 2021
CSS
0 vote158 views1 answer
Html invisible hr
CSS
0 vote153 views1 answer
Iterating data font size as to be decreased in Angular by using css
CSS
92 votes331 views5 answers
Bootstrap primary color code
CSS Bootstrap
21 votes176 views6 answers
Text border css
CSS
0 vote158 views1 answer
Have an item span multiple columns css grid
CSS