JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spinner">
  <div class="spinner-text">Loading</div>
  <div class="spinner-frame"></div>
<div>

CSS

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.spinner {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.spinner-text {
  color: firebrick;
  text-align: center;
  position: absolute;
  width: 100%;
  line-height: 200px;
  font-weight: bold;
  transition: color .5s ease;
}
.spinner-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-color: transparent;
  border-width: 30px;
  border-style: solid;
  border-right-color: firebrick;
  border-left-color: firebrick;
  animation: spinning 2s linear infinite;
  transition: border-color .5s ease;
}
.spinner:hover .spinner-frame {
  border-right-color: cadetblue;
  border-left-color: cadetblue;
}
.spinner:hover .spinner-text {
  color: cadetblue;
}
@keyframes spinning {
  from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}