loading spinner

by kthornbloom

HTML

<div class="bo-spinner"></div>

CSS

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

.bo-spinner {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  background: conic-gradient(#0f409b, #0079ba, #3698be, white);
  box-shadow: 0 0 20px #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  
  &:before {
    content:'';
    display: block;
    background: #fff;
    width: 30px;
    border-radius: 50%;
    height: 30px;
  }
  
  &:after {
    content:'';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0f409b;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
  }
}


body {
  background: #efefef;
}