Simpl Loader

by codef0rmer

HTML

<!-- SIMPL LOADER STARTS -->
<div class="l"></div>
<div id="f">
  <div id="b">Pay Later</div>
  Powered by
  <svg xmlns="http://www.w3.org/2000/svg" width="134" height="54" viewBox="74.403 11.936 134 54">
    <path fill="#00d1c1" d="M118.012 25.006h6.283v4.842c3.217-6.432 13.846-7.876 16.227-.05h.104c2.19-4.31 7.557-6.38 12.126-4.984 4.207 1.285 5.44 5.583 5.44 9.568v16.896h-6.54v-15.66c0-2.737-.714-5.457-4.003-5.24-3.222.21-5.255 3.04-5.94 5.962-.258 1.03-.31 2.162-.31 3.4v11.536h-6.542V35.618c0-2.9-.84-5.647-4.317-5.208-3.086.388-4.98 3.156-5.675 5.98-.257.98-.308 2.165-.308 3.35v11.535h-6.543v-26.27h-.002zm87.23 20.706c-1.697 0-2.68-.72-2.68-3.604V14.704l-6.49 6.497v21.887c0 7.522 4.48 8.446 8.087 8.446 1.08 0 2.06-.15 2.06-.15v-5.72s-.463.05-.977.05M188.4 29.577c-2.295-3.73-6.473-5.587-10.793-5.12-2.783.3-5.697 1.75-7.12 4.258v-3.71h-5.978V63.7l6.54-6.56v-8.85c2.195 3.198 6.545 4.11 10.145 3.328 9.408-2.04 11.738-14.665 7.203-22.038m-11.01 16.806c-4.016 0-6.268-3.685-6.516-7.325-.21-3.046.614-6.66 3.47-8.27 2.357-1.33 5.48-.954 7.39.98 4.172 4.235 2.663 14.616-4.345 14.616m-72.227-21.39h6.543v26.28h-6.543v-26.28zm-4.752 13.97c-1.012-4.58-5.35-6.767-9.31-8.43-2.613-1.096-7.806-2.464-7.658-6.116.148-3.614 4.387-4.548 7.275-4.05 1.63.282 3.242.938 4.675 1.838l4.352-4.354c-3.915-3.76-10.76-4.717-15.708-2.934-5.34 1.926-9.026 7.914-6.557 13.447 1.817 4.068 6.452 5.783 10.256 7.438 2.922 1.27 8.058 3.51 5.74 7.632-1.65 2.937-5.88 2.594-8.577 1.655-1.527-.526-3.008-1.332-4.304-2.336L76.22 47.13c3.812 3.856 10.102 5.483 15.317 4.496 5.933-1.12 10.22-6.543 8.87-12.66"></path>
  </svg>
</div>
<div id="t">
  Loading...
</div>
<!-- SIMPL LOADER ENDS -->

<!-- PAGE SPECIFIC HTML/CSS/JS GO HERE -->

CSS

html {
  font: 16px/1.5 Arial, sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wf-active {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  color: #5e6f6d;
  background: #fbfbfb;
}

html,
body,
#i {
  height: 100%;
}

#f {
  position: absolute;
  top: 12%;
  width: 100%;
  padding: 32px 0;
  font-size: 15px;
}

#b {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  text-rendering: optimizeLegibility;
}

#t {
  position: absolute;
  top: 54%;
  width: 100%;
}

#i {
  z-index: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0;
  display: none;
}

svg {
  vertical-align: middle;
  width: 45px;
  height: 22px;
}

.l {
  z-index: 2;
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: #00d1c1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.ll {
  -webkit-transform: translateX(72%);
  transform: translateX(72%);
  -webkit-transition: all 20s cubic-bezier(.05,1,.5,.95);
  transition: all 20s cubic-bezier(.05,1,.5,.95);
}

.ld {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all .1s;
  transition: all .1s;
}

.lh {
  -webkit-transform: translateX(100%) translateY(-2px);
  transform: translateX(100%) translateY(-2px);
  -webkit-transition: all .5s;
  transition: all .5s;
}

JavaScript

var d = document,
    s = setTimeout,
    w = window.location.href,
    i = d.getElementById('i'),
    l = d.getElementsByClassName('l')[0];
s(function() { l.className = 'l ll' });