CSS based spinner

spinner.css

// modifying height & width will cause various shapes to appear

.spinner {
  animation: spin 0.7s infinite linear;
  border-bottom: 6px solid rgba(0, 0, 0, 0.2);
  border-left: 6px solid rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  border-right: 6px solid rgba(0, 0, 0, 0.2);
  border-top: 6px solid #2180c0;
  content: "";
  height: 100px;
  left: 50%;
  margin: -15px auto auto -15px;
  position: absolute;
  top: 40%;
  width: 100px;
  z-index: 6;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}