Прелоадер для вашего сайта

В этом посте я собираюсь создать простой прелоадер. В этом проекте я буду использовать HTML, SCSS и немного JavaScript.

Мы начнем с добавления некоторого содержимого на нашу страницу, как показано ниже.

<div class="content">
  <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi vero nesciunt modi, incidunt ea similique reiciendis provident eligendi suscipit omnis.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores odit accusamus ipsa velit consequatur porro dolores at voluptatum. Obcaecati ipsa earum fugit. Rem ad quidem quos vel assumenda aperiam, unde, maxime ipsum natus laborum vero quia consequatur accusamus explicabo ullam aliquid iste similique officiis nihil, voluptate quasi recusandae. Labore voluptas facilis molestias corrupti explicabo mollitia earum cum, eius commodi neque saepe vitae aliquam quis id. Necessitatibus delectus doloribus officia ducimus sequi, error itaque repellat accusantium repellendus? Tenetur repellat obcaecati, perspiciatis accusamus ipsum excepturi nesciunt autem distinctio dolore quis qui facilis necessitatibus dolorum doloribus libero est mollitia saepe minus beatae quae expedita soluta ex ducimus. Blanditiis fugiat non officia illum. Iusto, eos dolores rerum necessitatibus eaque odio, atque, inventore amet neque libero modi ut blanditiis corrupti nam harum repellat soluta officiis tempore iste est natus omnis. Omnis nisi, fugit molestias minus recusandae quos. Reiciendis laudantium dicta natus? Iste eaque placeat cumque adipisci deleniti recusandae, labore velit, totam quaerat, error debitis ipsa ratione neque! Porro suscipit laboriosam minima, possimus facilis esse, rerum, error nesciunt repellat ipsum necessitatibus? Similique, sapiente aliquid. Non quisquam laudantium, ipsa minus eaque laboriosam deserunt neque eveniet quae porro quod, dolor corporis! Praesentium cupiditate, itaque libero eum perspiciatis quod.</p>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

И сам прелоадер

<div class="preload">
  <div class="circle__1">
  </div>
  <div class="circle__2">
  </div>
  <div class="circle__3">
  </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

HTML закончен, теперь пришло время для SCSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
}
body{
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.preload{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1b1b1b;
  transition: 400ms linear;
         ...
}
.content{
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
  width: min(calc(100% - 2rem), 1000px);
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.719);
  h1{
    color: lime;
    font-size: 1.4rem;
  }
  p{
    margin-top: 30px;
    color: #b8b8b8;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы оформим наши круги с помощью цикла sass for loop

@for $i from 1 through 3 {
  .circle__#{$i} {
    border: 4px solid lime;
    border-radius: 50%;
    position: absolute;
    filter: drop-shadow(0px 0px 5px lime);
    width: calc(250px - $i * 50px);
    aspect-ratio: 1 / 1;
    animation: calc(1.4s - $i * 0.2s) spin linear infinite;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

И стилизовать отдельные круги

.circle {
  &__1 {
    border-color: lime lime lime transparent;
  }
  &__2 {
    border-color: transparent transparent lime lime;
  }
  &__3 {
    border-color: lime transparent transparent lime;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Но у нас все еще нет анимации, поэтому давайте добавим ее.

@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Пришло время для JavaScript. Мы хотим удалить наш прелоадер после загрузки страницы

window.addEventListener('load', () => {
  document.querySelector('.preload').classList.add('finished')
})
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавим стиль для класса ‘finished’ в прелоадере

&.finished {
  transform: translateY(-100%);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Но это выглядит не очень хорошо, чтобы исправить это, мы можем добавить некоторую анимацию затухания к нашим кругам и задержать эффект выдвижения прелоадера, давайте добавим этот цикл в класс finished

@for $i from 1 through 3 {
  .circle__#{$i} {
    opacity: 0;
    transition: 400ms linear;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

И задержка в классе предварительной загрузки

transition-delay: 500ms;
Вход в полноэкранный режим Выйти из полноэкранного режима

Но она все равно исчезает слишком быстро, чтобы исправить это, мы будем использовать setTimeout в нашем JS

window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.preload').classList.add('finished')
  }, 1000)
})
Вход в полноэкранный режим Выход из полноэкранного режима

Готовый прелоадер выглядит следующим образом

Весь исходный код вы можете найти здесь
или аналогичную версию этого прелоадера на Codepen

Оцените статью
Procodings.ru
Добавить комментарий