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 vote141 views1 answer
How to style navbar-toggler-icon bootstrap 5
CSS
0 vote132 views1 answer
Font-strech css
CSS
6 votes149 views3 answers
Print css media query
CSS
0 vote145 views1 answer
Css radio button size
CSS
1 vote137 views1 answer
Mysqli load result into array
CSS
0 vote134 views1 answer
Unable to locate package neo4j
CSS
2 votes128 views1 answer
How to make animation stay on 100%
CSS
0 vote153 views1 answer
Shorthand notation of declaring top, right, bottom, left position
CSS
12 votes136 views4 answers
Css hover but no click
CSS
10 votes135 views6 answers
Css hover change another element
CSS