Как я могу создать полноценный предварительный загрузчик страниц?

Я пытаюсь создать предварительный загрузчик, который появляется с полосами загрузки и белым фоном, а затем исчезает с белым фоном через 4 секунды.

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

Вот мой HTML:

const loaderWrapper = document.querySelector('.loaderWrapper');

const fadeEffect = setInterval(() => {
  if (!loaderWrapper.style.opacity) {
    loaderWrapper.style.opacity = 1;
  }
  if (loaderWrapper.style.opacity > 0) {
    loaderWrapper.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
  }
}, 300);

html,
body {
  height: 100%;
}

body {
  background: rgb(199, 199, 199);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 999;
}

.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s infinite linear;
}

.loader .bar:nth-child(1) {
  animation-delay: 0s;
}

.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}

.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

<div class = "loaderWrapper">
  <div class = "loader">
    <div class = "bar"></div>
    <div class = "bar"></div>
    <div class = "bar"></div>
  </div>
</div>

<div id = "content">
  <h1>This is our page title</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Как я могу сделать значки панели загрузки в центре с белым фоном, а затем получить эффект плавного затухания через четыре секунды?

Вот JSFiddle: https://jsfiddle.net/pqd0xfsk/1/

Проверьте мой ответ, он не использует javascript и достигает того, чего вы действительно хотите!

— 12.12.2020 10:36

javascript html css

12.12.2020 10:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

439

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Просто измените следующий CSS, и это решит вашу проблему.

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 1000;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  z-index: 999;
  height:100%;
  width:100%;
}

12.12.2020 10:26

Ответ принят как подходящий

Вам действительно не нужен Javascript здесь. Это может быть достигнуто без использования JavaScript!

Поэтому я удалил javascript из кода javascript и добавил анимацию CSS следующим образом в .loaderWrapper и добавил CSS для центрирования элементов, например:

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

.loaderWrapper {
  .
  .
  .
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeLoader 0.6s 4s ease forwards;
}

Код для центрирования элементов по вертикали и горизонтали:

.loaderWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

Код анимации:

.loaderWrapper {
  animation: fadeLoader 0.6s 4s ease forwards;
}

fadLoader: Название анимации
0.6s: продолжительность анимации
4s: задержка анимации
ease: функция анимации
forwards: выполнить анимацию только один раз Попробуйте запустить это:

html,
body {
  height: 100%;
}

body {
  background: #898989;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeLoader 0.6s 4s ease forwards;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 999;
}
.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s infinite linear;
}
.loader .bar:nth-child(1) {
  animation-delay: 0s;
}
.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}
.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

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

<html lang = "en">
<head>
  <meta charset = "utf-8">

  <title>Iko Preloader</title>
  <meta name = "description" content = "">
  <meta name = "author" content = "">
  <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <div class = "loaderWrapper">
        <div class = "loader">
            <div class = "bar"></div>
            <div class = "bar"></div>
            <div class = "bar"></div>
          </div>
    </div>

      <div id = "content">
        <h1>This is our page title</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>

      <script src = "script.js"></script>
</body>
</html>

Или посмотрите это в скрипте JS: https://jsfiddle.net/vxju64sc/2/

Это выглядит хорошо. Могу ли я в любом случае добавить задержку, например, 2-3 секунды, прежде чем выполнять эффект затухания?

— 12.12.2020 10:40

В анимацию уже добавлена задержка 4s, если вы хотите увеличить или уменьшить значение, вы можете это сделать.

— 12.12.2020 10:41

Пробовал, но кажется, что задержка не работает. ` анимация: fadeLoader 0.6s 10s замедление вперед;`

— 12.12.2020 10:43

добавил это, но это не задержало анимацию перед ее запуском.

— 12.12.2020 10:44

Анимация, о которой я говорю, - это эффект затухания, который будет иметь задержку 4 секунды, если вы используете 10 секунд, то она будет иметь задержку 10 секунд. Здесь задержка означает, что анимация затухания будет происходить после того, как пройдёт длительность задержки, поэтому эффект затухания будет иметь место через 4 с или 10 с (в вашем случае).

— 12.12.2020 10:46

Если вы хотите, чтобы затухание длилось дольше, увеличьте значение 0,6 с до чего-то другого, для анимации затухания потребуется больше времени.

— 12.12.2020 10:47

Обязательно добавьте что-то вроде loaderWrapper.addEventListener("animationend", () => loaderWrapper.remove()) в свой JS. В противном случае вы не сможете взаимодействовать с основным контентом. Или, как вариант, установите .loaderWrapper { pointer-events: none; } в вашем CSS (но тогда вы можете щелкнуть загрузчик).

— 12.12.2020 10:51

@JosefWittmann Да, верно, спасибо, что упомянули об этом! Убедитесь, что вы добавили это, я также обновлю свой ответ!

— 12.12.2020 10:53

12.12.2020 10:31

Я внес некоторые изменения в вашу скрипку здесь: https://jsfiddle.net/wxky2t4m/9/

Основная часть заключается в использовании API веб-анимации для плавных переходов и, что наиболее важно, для скрытия оверлея после его завершения (чтобы обеспечить взаимодействие с основным контентом).
Вы также можете использовать переходы CSS, но я не знаю, получите ли вы там событие finish.

const loaderWrapper = document.querySelector('.loaderWrapper');

const fade = loaderWrapper.animate([
    { opacity: 1 },
    { opacity: 0 },
  ], {
    duration: 4000,
    easing: "ease-in"
  }
)

// Remove the element to allow clicking the main content.
fade.addEventListener("finish", () => loaderWrapper.style.display = "none")

Но в CSS были небольшие вещи, касающиеся flexbox, которые центрируют ваши панели.

Вы также можете использовать jQuery, если хотите: https://api.jquery.com/fadeOut/

Это выглядит хорошо, но у меня есть один комментарий. Как я могу заставить его выглядеть в полную силу в течение 2 секунд, прежде чем начнется эффект затухания?

— 12.12.2020 10:35

Используйте delay: 2000 в опциях animate(...). Взгляните на документы здесь (названия такие же, как в CSS): developer.mozilla.org/en-US/docs/Web/API/Element/animate

— 12.12.2020 10:37

12.12.2020 10:32

Вы можете использовать анимацию CSS на загрузчике, а также на полосах, и это определит время для вас - если вы сделаете ее продолжительностью 5 секунд и первые 80%, она ничего не делает, а затем начинает исчезать. Вы также можете настроить полосы так, чтобы они двигались вверх и вниз в течение 5 итераций, чтобы они перестали анимироваться после того, как исчезнут.

Центрирование достигается с помощью небольшого количества CSS в загрузчике.

Не требуется setInterval/JS, поэтому он более плавный.

html,
body {
  height: 100%;
}

body {
  background: rgb(199, 199, 199);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  animation: loader 5s 1 linear;
  animation-fill-mode: forwards;
}

.loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s 5 linear;
}
.loader .bar:nth-child(1) {
  animation-delay: 0s;
}
.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}
.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}
@keyframes loader {
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

<div class = "loaderWrapper">
    <div class = "loader">
        <div class = "bar"></div>
        <div class = "bar"></div>
        <div class = "bar"></div>
      </div>
</div>

  <div id = "content">
    <h1>This is our page title</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

12.12.2020 10:44