CSS3 loader demo B2B

by Petr Haluza

HTML

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

CSS

#loading {background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    padding-top: 20%;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 9999;}
    
.loader {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  width: 40px;
  height: 40px;
  border: 2px solid #0cf;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.75s infinite linear;
}

.loader::after {left: 2px; top: 2px; position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
    display: block;
  left: -2px;
  top: -2px;
  border: inherit;
  transform: rotate(65deg);
}



@keyframes spin {
  from { transform: rotate(0deg); }
  to {   transform: rotate(360deg);}
  }