CSS

spinner

<div className='loadingSpinner'></div>


.loadingSpinner {
  width: 64px;
  height: 64px;
  border: 8px solid;
  border-color: #00cc66 transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Spinner

      <div className='loadingSpinnerContainer'>
      <div className='loadingSpinner'></div>
      
      //CSS
      .loadingSpinner {
  width: 64px;
  height: 64px;
  border: 8px solid;
  border-color: #00cc66 transparent #00cc66 transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

spinner

.spinner {
    width: 70px;
    height: 70px;
    border: 8px solid lightblue;
    border-top-color: blue ;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinner>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.spinner-dual {
    width: 70px;
    height: 70px;
    border: 8px solid transparent;
    border-top-color: blue;
    border-bottom-color: blue;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;  
}

.spinner-dual>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin .8s reverse linear infinite;
}

.spinner-fast {
    width: 70px;
    height: 70px;
    border-top: 5px solid blue;
    border-right: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-fast>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin 3s linear infinite;
}

.spinner-triple {
    width: 70px;
    height: 70px;
    border: 5px solid transparent;
    border-top-color: blue ;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinner-triple::before {
    content: "";
    border: 5px solid transparent;
    border-top-color: lightskyblue ;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    animation: spin 2s linear infinite;
}

.spinner-triple::after {
    content: "";
    border: 5px solid transparent;
    border-top-color: lightblue;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    animation: spin 1s linear infinite;
}

.spinner-triple>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin 1.5s linear infinite;
}

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