Spinner in html css react

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid white;
  border-bottom: 16px solid white;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

<h2>How To Create A Loader</h2>

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

</body>
</html>

Similar codes

0 vote333 views1 answer
Which bootstrap css class will you use to put the navbar at the top of the page? feel free to check out the bootstrap website.
CSS Bootstrap
17 votes286 views1 answer
Variables scss en calc()
CSS
1 vote232 views1 answer
Transition all 0.3s ease-in-out
CSS
0 vote265 views1 answer
Border box reset
CSS
0 vote269 views1 answer
Html print page break
CSS
0 vote302 views1 answer
Translate argument animation css'
CSS
39 votes287 views4 answers
Css z-index
CSS
0 vote281 views1 answer
Card tailwind css
CSS
19 votes302 views9 answers
How to center a div
CSS
0 vote305 views1 answer
How make button which is fixed even after i scroll
CSS