etracker spinner

etracker spinner

by pj_js15

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<html>

  <head>
  </head>

  <body>
    <div class="loader-overlay">
      <div class="loader-container">
        <div class="loader-animation"></div>
        <div class="loader-text">Loading... Please wait.</div>
      </div>
      
    </div>

  </body>

</html>

CSS

.loader-overlay {
  position: relative;
  border: 1px solid #FFF;
  height: 100%;
  overflow: hidden;
}

.loader-container {
  position: relative;
  height: 500px;
}

.loader-animation {
  left: 46%;
  top: 20%;
  position: relative;
  /* margin: 0 auto; */
  height: 60px;
  width: 60px;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(239, 28, 33, .15);
  border-right: 6px solid rgba(239, 28, 33, .15);
  border-bottom: 6px solid rgba(239, 28, 33, .15);
  border-top: 6px solid rgba(239, 28, 33, .8);
  border-radius: 100%;
}

.loader-text {
  text-align: center;
  position: relative;
  margin-top: 130px;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

JavaScript

$(this).ready(function() {

});