preloader.html

<div id="preloader">
  <div id="status">
    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
    <div id="loading-text"><p class="grid-gray">steeping...</p></div>
  </div>
</div>

<style>
  .tea-icon{
    display:block;
    text-align:center;
    animation: pulse 1s infinite;
  }
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 9999;
  }
  #status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-position: center;
    margin: -100px 0 0 -100px;
  }
  #loading-text {
    font-size: 20px;
    text-align: center;
    animation: pulse 1s infinite;
  }
</style>

<script>
  $(window).on('load', function() {
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
  });
</script>