Spinner Sample with css

by Rayudu Ikkurthi

HTML

<div class="SpinnerLayer">
<div class="VpSpinner">
<div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
</div>
</div>

CSS

.SpinnerLayer{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  position:absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,0.3);
}
.VpSpinner{
  height: 60px;
    width: 60px;
    position: relative;
}
.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0183d7;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s
}

@-webkit-keyframes bounce {
    0%,
    100% {
        -webkit-transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1)
    }
}

@keyframes bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0)
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}