/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 vote200 views1 answer
Gradient 3 colors
CSS
0 vote248 views1 answer
Background image for div in grid system bootstrap
CSS Bootstrap
0 vote182 views1 answer
Line circle in css
CSS
5 votes192 views2 answers
How to make page responsive using css
CSS
17 votes148 views1 answer
Have you used flexbox & css grid before? what are the differences between them? interview
CSS
11 votes179 views3 answers
Filter for css white color
CSS
198 votes479 views6 answers
How to add css in html
CSS
51 votes173 views5 answers
Css reset
CSS
-1 vote180 views2 answers
Css clip-path
CSS
1 vote320 views1 answer
Cypress element css
CSS