JSFiddle - React, Tailwind, and code Playground
HTML
<div class="progbar"></div>
CSS
body{
}
.progbar {
width:200px;
height:200px;
background:#fece30;
-webkit-animation: barshine 10s linear infinite;
-moz-animation: barshine 10s linear infinite;
animation: barshine 10s linear infinite;
}
@-webkit-keyframes barshine {
10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
}
60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}
@-moz-keyframes barshine {
10% {background: -moz-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
}
60% {background: -moz-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}
@keyframes barshine {
10% {background: gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
}
60% {background: linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}