/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

4 votes347 views1 answer
Flexbox center and space between
CSS
2 votes323 views1 answer
Nunito font family
CSS
0 vote312 views1 answer
How to remove link line in css
CSS
6 votes372 views3 answers
How to add a background overlay in css
CSS
0 vote356 views2 answers
Background image syntax in css if it is in folder
CSS
15 votes341 views1 answer
How to link fonts css
CSS
10 votes341 views4 answers
Bootstrap badges Links
CSS
34 votes319 views6 answers
How to align text in css
CSS
0 vote316 views1 answer
Color custom css use in laravel
CSS
5 votes340 views2 answers
Make text not selectable
CSS