Loader

loader.css

.loader-container {
  width: 40px;
  height: 40px;
  background-color: #6c6cc7;
  border-radius: 30px;
  padding: 8px;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

.loader-container.show {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

.loader {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke-width: 6;
  fill: none;
  
  .internal-circle,
  .external-circle {
    stroke: #fff;
    stroke-dashoffset: 0;
    transform-origin: center;
  }
  
  .internal-circle {
    stroke-dasharray: 187;
    animation: internal 1s ease-in-out infinite;
    opacity: .4;
  }
  
  .external-circle {
    stroke-dasharray: 312;
    animation: external 1s linear infinite;
    opacity: .9;
  }
}

@keyframes internal {
  0% {
    stroke-dashoffset: 187;
  }
  25% {
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(360deg);
  }
}

@keyframes external {
  0% {
    stroke-dashoffset: 312;
    transform: rotate(70deg);
  }
  60% {
    stroke-dashoffset: -312;
  }
  100% {
    stroke-dashoffset: -312;
    transform: rotate(450deg);
  }
}

loader.html

<div class="loader-container">
  <svg class="loader" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <circle class="internal-circle" cx="60" cy="60" r="30"></circle>
    <circle class="external-circle" cx="60" cy="60" r="50"></circle>
  </svg>
</div>

loader.js

function toggleLoader() {
  document.getElementsByClassName("loader-container")[0].classList.toggle("show");
}