LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Loader example

CSS
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.7);  
}

.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

svg {
  display: block;
  margin: auto;
  width: 100px;
  fill: none;
  stroke-width: 6px;
  stroke-linecap: round;  
  -webkit-animation: rotateSpinner 2s infinite linear;  
          animation: rotateSpinner 2s infinite linear;
}

path {
  stroke: black;
}

.circle-segment-1 {
  stroke: transparent;
}
.circle-segment-2 {
  stroke: magenta;
}
.circle-segment-3 {
  stroke: yellow;
}
.circle-segment-4 {
  stroke: black;
}
 
@-webkit-keyframes rotateSpinner {
  
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
 
@keyframes rotateSpinner {
  
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
JS
/* Just a draft of basic principle. Don’t use as it is!*/

var btn = document.getElementById('activateSpinner'),
    overlay = document.getElementById('overlay');

/* activate spinner on click*/
btn.addEventListener('click', function(){
  overlay.classList.toggle('active');
});

/* just for being able to get rid of it */
// In real world you probably won’t like to stop the process in the middle.
// But as usual: Well, it depenends…™
overlay.addEventListener('click', function(){
  this.classList.toggle('active');
});
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv