Когда сайт будет полностью загружен, тогда прелоадер исчезнет и пользователь увидит сайт

В файле HTML создадим два div'a - обёртку для прелоадера и сам прелоадер.

<div id="myPreloader" class="wrap-myLoader">
  <div class="myLoader"></div>
</div>

Стилизуем блок-обёртку для прелоадера. Растянем блок wrap-myLoader на весь экран, выберем цвет фона, z-index (чтобы всегда был сверху), opacity и visible в дальнейшем уберём с помощью js.

.wrap-myLoader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #424242;
  z-index: 51;
  transition: 1s all;
  opacity: 1;
  visibility: visible;
}

Стили для самого прелоадера. Спозиционируем его ровно по центру, зададим высоту и ширину. Раскрасим его стороны в белый цвет, а одну сторону в зелёный. С помощью border-radius сделаем из квадрата круг.

Также создадим класс .done - будем добавлять его к обёртке прелоадера после полной загрузки всех элементов. Он будет скрывать наш прелоадер.

.myLoader {
  position: absolute;
  left: 49%;
  top: 49%;
  transform: translate(-49%, -49%);
  width: 76px;
  height: 76px;
  border: 10px solid white;
  border-top-color: #0ca70c;
  border-radius: 50%;
}
.cansel {
  opacity: 0;
  visibility: hidden;
}

Создадим ключевые кадры анимации для прелоадера

@keyframes myAnim {
  from {
    transform: translate(-49%, -49%) rotate(0deg);
  }
  to {
    transform: translate(-49%, -49%) rotate(360deg);
  }
}

Зададим свойства анимации: длительность - 1 секунда (т.е. от from до to круг будет пройден за 1 с), скорость анимации - равномерно, повтор анимации - бесконечность

animation: 1s myAnim linear infinite;

JS-код: после полной загрузки страницы элементу с идентификатором myPreloader будет добавляться класс done, который будет скрывать наш прелоадер. Так же зададим значение в миллисекундах через сколько скрывать прелоадер (например, через пол секунды).

document.body.onload = function() {
  setTimeout(function() {
    var preloader = document.getElementById('myPreloader');
    if (!preloader.classList.contains('cansel'))
    {
      preloader.classList.add('cansel');
    }
  }, 499)
};

See the Pen Preloader by Nikolay (@Only-to-top) on CodePen.

Изучаем английский
English Russian
Opacity Непрозрачность
Transition Переход
Translate Преобразовывать, переносить
Keyframes Ключевые кадры