/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 vote138 views2 answers
What is css selector
CSS
4 votes139 views1 answer
How to get an angled section end css
CSS
-1 vote197 views2 answers
Bootstrap 4 popover content from div
CSS Bootstrap
0 vote150 views1 answer
Mat-form-field textarea save with new line
CSS
8 votes150 views3 answers
Background degrade
CSS
0 vote140 views1 answer
Transition all ease 0.3s
CSS
3 votes105 views1 answer
Smooth scroll to anchor
CSS
19 votes145 views2 answers
Css circle card
CSS
0 vote148 views1 answer
How to enlarge image when hover on in css
CSS
12 votes188 views5 answers
How to update the object value of any array key based on value
CSS