.loader {
  height: 80px;
  width: 80px;
  background-color: #0c0c0c;
  border-radius: 50px;
  display: grid;
  place-content: center;
  position: relative;
}
.loader svg,
.in-load {
  animation: spin 3s linear infinite;
}
.in-load {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: transparent;
  box-shadow:
    inset 0 0 0 5px #0c0c0c,
    inset 0 0 0 7px #fb9ec6,
    inset 0 0 0 10px #0c0c0c,
    inset 0 0 0 12px #fff;
  border-radius: 50%;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(#f93827, #f0a04b, #fb9ec6);
  border-radius: 50%;
  z-index: -1;
  padding: 3px;
  right: -3px;
  bottom: -3px;
  animation: spin 5s linear infinite;
}
.loader::after {
  filter: blur(10px);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}