/*
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
*/
.show-loading{
  display: block;
}
.spinner {
  text-align: center;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 24%;
  left: 0;
}

.spinner > div{
  width: 18px;
  height: 18px;
  background-color: #0d47a1;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/*success check*/

.circle-loader {
  margin: 0 0 30px 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  /* border-left-color: #f57d02; */
  animation-name: loader-spin;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  display: none;
  vertical-align: top;
  width: 80px;
  height: 80px;
  right: 50%;
  margin-right: -50px;
  top: 18%;
}

.circle-loader,
.circle-loader:after {
  border-radius: 50%;
  /* width: 8em; */
  /* height: 8em; */
}

.load-complete {
  -webkit-animation: stop-loader;
  animation-duration: 3.5s;
  animation: stop-loader;
  border-color: #5cb85c;
  /* transition: border 1.5s ease; */
  /* width: 50px; */
  /* height: 50px; */
}

.circle-loader .checkmark {
 
}
.circle-loader .checkmark.draw:after {
  animation-duration: 500ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.circle-loader .checkmark:after {
  opacity: 1;
  height: 51%;
  width: 21%;
  transform-origin: left top;
  border-right: 2px solid #5cb85c;
  border-top: 2px solid #5cb85c;
  content: '';
  left: 26%;
  top: 53%;
  position: absolute;
}

@keyframes stop-loader {
  0% {
    border-color:rgba(0, 0, 0, 0.2) ;
  }
  100% {
    border-color: #5cb85c;
  }
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  50% {
    height: 0;
    width: 21%;   
    opacity: 1;
  }


  100% {
    height: 51%;   
    width: 21%;   
    opacity: 1;
  }
}