/***********************
/*     01. Loader.    /*
************************/
 
   .example {
      position: fixed;
    	z-index: 999999;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    background-color: #0c0c0c;
	   /*background: url("../img/bg.jpg"); Change color of backgroud color of loading page*/
   }
   .sk-bounce {
	    position: absolute;
	    top: 50%; /* centers the loading animation vertically on the screen */
	    left: 51.5%; /* centers the loading animation horizontally on the screen */
	    width: 3.75rem;
	    height: 1.25rem;
 	    margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */ 
}

 
/* Config */
:root {
  --sk-size: 47px;/* Change size of loading circle */
  --sk-color: #00d7c3;/* Change color of loading circle */
}


/* Utility class for centering */
.sk-center { margin: auto; }


/*  Bounce

      <div class="sk-bounce">
        <div class="sk-bounce-dot"></div>
        <div class="sk-bounce-dot"></div>
      </div>
  */
.sk-bounce {
  width: var(--sk-size);
  height: var(--sk-size);
  position: relative;
}

.sk-bounce-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--sk-color);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}

.sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; }

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
  } 45%, 55% {
    transform: scale(1); 
  } 
}