Блог

Главная - Вопросы по программированию - Анимация загрузчика CSS

Анимация загрузчика CSS

#javascript #html #css

#javascript #HTML #css

Вопрос:

Это пример анимации загрузчика, скопированной с веб-сайта w3schools:

 <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

<h2>How To Create A Loader</h2>

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

</body>
</html>

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

 setTimeout(function() {
    $('#loadingAnimation').addClass('hidden');
  }, 1500);

Теперь мой вопрос:
Есть ли способ добавить элементы анимации с помощью JavaScript? Я имею в виду, когда я просматриваю страницу, я могу изменить CSS загрузчика, который делает его видимым, так как я могу добавить элементы на страницу с помощью JavaScript, а затем удалить его, чтобы сделать его неизменным?

 #loadingAnimation{
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ffffff;
    opacity: 1;
    transition: 0.5s;
    visibility: visible;
    z-index: 10;
}

#loadingAnimation.hidden{
    opacity: 0;
    visibility: hidden;
}

Я новичок в программировании 🙂 Мне нужна ваша помощь, и я надеюсь, что мой вопрос понятен!

Комментарии:

1. Вы хотите динамически удалять элемент loader из DOM?

Ответ №1:

Есть некоторые вещи, которые вы можете сделать, а именно:

  1. Добавьте в свой стиль класс, который выполняет анимацию (рекомендуется, поскольку он требует наименьшей работы), и добавьте элементы с этим классом / добавьте класс в элементы.
  2. Создайте новый элемент стиля с уникальным идентификатором (несколько слишком сложным для чего-то такого масштаба)
  3. requestAnimationFrame — Очень сложно и легко ошибиться — в основном только для справки

Реализация для 1: CSS:

 .loadingAnimation { /* . notates a class whereas # notates an id */
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ffffff;
    opacity: 1;
    transition: 0.5s;
    visibility: visible;
    z-index: 10;
}

JS:

 
const loader = document.createElement("div");// Create a new div element
loader.className = "loadingAnimation"; // Add the loadingAnimation class to it
document.getElementById("root").append(loader); // Add it to an element with id root
setTimeout(function() {
    loader.remove(); // Remove the loader
}, 1500);

Комментарии:

1. Что, если бы я хотел добавить новый div внутри первого loader div ? и дать ему оба разных стиля? Или, например img , тег внутри div тега в качестве дочернего элемента …?

2. Вы можете создать столько элементов, сколько пожелаете, и ссылаться на них либо по идентификатору (добавленному как element.id = "..." ), либо по их переменным, для сложных случаев вы также можете использовать селекторы CSS с document . querySelector ( developer.mozilla.org/en-US/docs/Web/API/Document/querySelector )

Ответ №2:

Вместо того, чтобы применять hidden класс к элементу loader, вы можете просто удалить его!

 setTimeout(function() {
  $('#loadingAnimation').remove();
}, 1500);

Это удалит его из DOM и остановит людей, играющих со стилем в инструментах разработки.

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

Метки: