Простой прелоадер

by Anton Polyakin

HTML

<div class="preloader" id="js-preloader">
  <div class="spin"></div>
</div>

CSS

.preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
}

.spin {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  border-width: 5px;
  border-color: white;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left: 5px solid transparent;
  border-radius: 100%;
  animation: rotate .5s linear infinite;
}

.preloader-fadeout {
  animation: fadeOut .5s linear;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

JavaScript

'use strict';
var myApp = (function() {

  let dummyFunction = function() {
    let preloader = document.all['js-preloader'];
    preloader.classList.toggle('preloader-fadeout', true);
    setTimeout(function() {
      preloader.remove();
    }, 1000);
    for (let i = 1000; i--;) {
      console.log('%c Hello from %s', 'color: tomato', 'dummyFunc');
    }
  };

  return {
    dummyFunction: dummyFunction
  };

})();


myApp.dummyFunction();