Page Loader

by Kevin Pliester

HTML

<div class="pageLoader">
    <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div>
</div>

CSS

.pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F17863;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageLoaderText {
    font-size: 2rem;
    font-weight: 800;
}

JavaScript

let interval = setInterval(function() {
  let dots = $('.pageLoaderDots');

  if (dots.text().length !== 3) {
    dots.append('.');
  } else {
    dots.text('');
  }
}, 500);


setTimeout(function() {
  $('.pageLoaderDots').text('');
  clearInterval(interval);
  $('.pageLoader').fadeOut();
}, 4000);