/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

-1 vote193 views2 answers
How to scroll fixed position
CSS
49 votes210 views5 answers
Absolute position div center
CSS
12 votes211 views3 answers
Css background image size fit screen
CSS
76 votes229 views6 answers
Display flex css
CSS
0 vote195 views1 answer
Change font size according to screen css
CSS
109 votes214 views6 answers
What is padding in css
CSS
10 votes209 views2 answers
How to include one css file in another
CSS
0 vote237 views2 answers
Fix materialize form label not working
CSS
1 vote194 views2 answers
Css block
CSS
0 vote197 views1 answer
An operation was attempted on something that is not a socket
CSS