Я использую Python и Django для изменения веб-сайта, я также использую загрузчик 4. Я пытаюсь изменить предварительно загруженный счетчик, который используется в данный момент (типичный круговой счетчик).
Я ввел предварительный загрузчик в свой HTML-файл, мой CSS-файл и создал файл custom.js для поддержкизагрузчик еще когда обновляю страницу загрузчик показывает стандартный кружок. (Я удалил предыдущие файлы счетчика и код стиля, но по какой-то причине он все еще отображается, когда я использую «div id = preloader»
Вот мой стиль preloader css.
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should be a color other than white */
z-index: 1000;
/* makes sure it stays on top */
}
.pre-container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #53dd6c;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Здесьэто пользовательский js-файл
$(window).load(function () {
// preloader
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(550).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(550).css({
'overflow': 'visible'
});
});
вот мой тег preloader в моем html-файле
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
Нет сообщения об ошибке, но я хочу показать отскок.