Замена стандартного прелоадера Bitrix
от v2Team
Если вам захотелось заменить скучный и уже приевшийся прелоадер Битрикса, вот вам легкое решение данной задачи
Для начала пропишем стиль для нашего нового прелоадера. Он будет на чистом css
.loader {
position: fixed;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
top: 0;
left: 0;
z-index: 10000 !important;
background-color: rgba(255, 255, 255, 0.75);
}
.cssload-clock {
border-radius: 58px;
border: 3px solid #122072;
height: 78px;
width: 78px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -39px;
margin-left: -39px;
}
.cssload-clock:after {
content: "";
position: absolute;
background-color: #122072;
top: 2px;
left: 48%;
height: 37px;
width: 4px;
border-radius: 5px;
transform-origin: 50% 97%;
-o-transform-origin: 50% 97%;
-ms-transform-origin: 50% 97%;
-webkit-transform-origin: 50% 97%;
-moz-transform-origin: 50% 97%;
animation: grdAiguille 0.8s linear infinite;
-o-animation: grdAiguille 0.8s linear infinite;
-ms-animation: grdAiguille 0.8s linear infinite;
-webkit-animation: grdAiguille 0.8s linear infinite;
-moz-animation: grdAiguille 0.8s linear infinite;
}
.cssload-clock:before {
content: "";
position: absolute;
background-color: #122072;
top: 6px;
left: 48%;
height: 34px;
width: 4px;
border-radius: 5px;
transform-origin: 50% 94%;
-o-transform-origin: 50% 94%;
-ms-transform-origin: 50% 94%;
-webkit-transform-origin: 50% 94%;
-moz-transform-origin: 50% 94%;
animation: ptAiguille 4.8s linear infinite;
-o-animation: ptAiguille 4.8s linear infinite;
-ms-animation: ptAiguille 4.8s linear infinite;
-webkit-animation: ptAiguille 4.8s linear infinite;
-moz-animation: ptAiguille 4.8s linear infinite;
}
@keyframes grdAiguille {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes grdAiguille {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes grdAiguille {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes grdAiguille {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes grdAiguille {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes ptAiguille {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes ptAiguille {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes ptAiguille {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes ptAiguille {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ptAiguille {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
Ну а дальше - переопределяем функции битрикса BX.showWait и BX.closeWait
BX.showWait = function () {
var loader = '<div class="loader"><div class="cssload-clock"></div></div>';
$('body').append(loader);
};
BX.closeWait = function () {
$('body').find('.loader').remove();
};
На выходе получим вот такие часики
Готовы сделать всю работу за Вас
от500₽
- 30 минут
Поработаем?
Опишите свой запрос, мы расчитаем стоимость вашей задачи.