w10 loading

by imys

HTML

<div class="loading"></div>

CSS

.loading {
  position: relative;
  width: 20px;
  height: 20px;
  background: #2196F3;
  border-radius: 50%;
  overflow: hidden;
}
.loading:before,
.loading:after {
   content: '';
   position: absolute;
}

.loading:before {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #fff;
  border-radius: 50%;
}

.loading:after {
  z-index: 1;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: #90caf9;
  transform-origin: right bottom;
  animation: loading .7s linear infinite;
}


@keyframes loading {
  from {  }
  to { transform: rotate(360deg)  }
}