JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<form action="">
  <input type="number" id="num">
  <meter form="num" min="0" low="10" high="90" optimum="50" max="100" value="40"></meter>
</form>


<div class="elem"></div>

CSS

.elem {
  width: 200px;
  height: 200px;
  margin: 5rem auto;
  border-radius: 50%;
  background: conic-gradient(from 0deg at center, cornflowerblue, firebrick, yellow);
  animation: spin .5s linear infinite;
}


@keyframes spin {
  to  {
      background: conic-gradient(from 360deg at center, cornflowerblue, firebrick, yellow);
  }
}