LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
body {
  background: #536dfe;
  color: #FFF;
  overflow: hidden;
}

#trg {
  display: inline-block;
  background: transparent;
  border: 2px solid #FFF;
  color: #fff;
  outline: none;
  box-shadow: none;
  padding: 17px 20px;
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  box-shadow: inset 0 0 0 0 #FFF;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
}
#trg:hover {
  box-shadow: inset 0 0 0 50px #FFF;
  color: #536dfe;
}

#loader {
  display: block;
  height: 80px;
  width: 80px;
  position: absolute;
  right: 20px;
  bottom: 50px;
}
#loader #circle {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: 50%;
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
  opacity: 0;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
#loader #circle:after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #5677fc;
  border-radius: 50%;
  border-left-color: transparent;
  border-top-color: transparent;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-animation: RotateIt 1s linear infinite;
          animation: RotateIt 1s linear infinite;
}
#loader #circle:before {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #efefef;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
#loader.visible #circle {
  opacity: 1;
  -webkit-animation: hop 500ms cubic-bezier(0.5, 1.25, 0.5, 1.25);
          animation: hop 500ms cubic-bezier(0.5, 1.25, 0.5, 1.25);
}

@-webkit-keyframes hop {
  0% {
    -webkit-transform: translateY(150%);
            transform: translateY(150%);
    opcatiy: 0;
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opcatiy: 1;
  }
}

@keyframes hop {
  0% {
    -webkit-transform: translateY(150%);
            transform: translateY(150%);
    opcatiy: 0;
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opcatiy: 1;
  }
}
@-webkit-keyframes RotateIt {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(720deg);
            transform: translate3d(-50%, -50%, 0) rotate(720deg);
  }
}
@keyframes RotateIt {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(720deg);
            transform: translate3d(-50%, -50%, 0) rotate(720deg);
  }
}
JS
// This is a non-js loader solution
// JS is only a part of the demonstration
// Feel free to use, its my opinion how loaders 
// should work fine without annoyance of the loading process

$('#trg').on('mouseenter',function(){
  $('#loader').toggleClass('visible');
});
$('#trg').on('mouseleave',function(){
  $('#loader').toggleClass('visible');
});
Host Instantly Drag and Drop Website Builder

 

Description

Loader that signs user that something is loading but the user feels "Im still free"
Term
Mon, 11/27/2017 - 21:44

Related Codes

Pen ID
Pen ID
Pen ID