Skip to content

Instantly share code, notes, and snippets.

@Itachi261092
Last active January 15, 2024 08:00
  • Star 12 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Itachi261092/1755635003c8fe5c16e4 to your computer and use it in GitHub Desktop.
[1C-Bitrix / 1С-Битрикс] AJAX Custom Preloader / Кастомный прелоадер стандартного аякса

Кастомный ajax preloader на 1С-Битрикс.

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

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

В футер перед /body ставим вызов включаемой области. Скрипт я обычно копирую вниз включаемой области. Весь код в ней - это хтмл код прелоадера.

CSS можно скопировать в template_styles, а можно подключить отдельно в header.php шаблона сайта.

/* AJAX CUSTOM PRELOADER */
#win8_wrapper{
display: none;
background: #000;
height: 100%;
opacity: 0.7;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}
.windows8 {
/*position: relative;
width: 50px;
height:50px;
margin:auto;*/
width: 50px;
height: 50px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.windows8 .wBall {
position: absolute;
width: 47px;
height: 47px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 3.3225s infinite;
-o-animation: orbit 3.3225s infinite;
-ms-animation: orbit 3.3225s infinite;
-webkit-animation: orbit 3.3225s infinite;
-moz-animation: orbit 3.3225s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 6px;
height: 6px;
background: rgb(255,255,255);
left:0px;
top:0px;
border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.windows8 #wBall_1 {
animation-delay: 0.726s;
-o-animation-delay: 0.726s;
-ms-animation-delay: 0.726s;
-webkit-animation-delay: 0.726s;
-moz-animation-delay: 0.726s;
}
.windows8 #wBall_2 {
animation-delay: 0.143s;
-o-animation-delay: 0.143s;
-ms-animation-delay: 0.143s;
-webkit-animation-delay: 0.143s;
-moz-animation-delay: 0.143s;
}
.windows8 #wBall_3 {
animation-delay: 0.2865s;
-o-animation-delay: 0.2865s;
-ms-animation-delay: 0.2865s;
-webkit-animation-delay: 0.2865s;
-moz-animation-delay: 0.2865s;
}
.windows8 #wBall_4 {
animation-delay: 0.4295s;
-o-animation-delay: 0.4295s;
-ms-animation-delay: 0.4295s;
-webkit-animation-delay: 0.4295s;
-moz-animation-delay: 0.4295s;
}
.windows8 #wBall_5 {
animation-delay: 0.583s;
-o-animation-delay: 0.583s;
-ms-animation-delay: 0.583s;
-webkit-animation-delay: 0.583s;
-moz-animation-delay: 0.583s;
}
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index: 99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin: 0%;
}
30% {
opacity: 1;
-moz-transform: rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin: 7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin: 30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin: 39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin: 70%;
}
76% {
opacity: 0;
-moz-transform: rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
/* AJAX CUSTOM PRELOADER END */
<div id="win8_wrapper">
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
</div>
var lastWait = [];
/* non-xhr loadings */
BX.showWait = function (node, msg)
{
node = BX(node) || document.body || document.documentElement;
msg = msg || BX.message('JS_CORE_LOADING');
var container_id = node.id || Math.random();
var obMsg = node.bxmsg = document.body.appendChild(BX.create('DIV', {
props: {
id: 'wait_' + container_id,
className: 'bx-core-waitwindow'
},
text: msg
}));
setTimeout(BX.delegate(_adjustWait, node), 10);
$('#win8_wrapper').show();
lastWait[lastWait.length] = obMsg;
return obMsg;
};
BX.closeWait = function (node, obMsg)
{
$('#win8_wrapper').hide();
if (node && !obMsg)
obMsg = node.bxmsg;
if (node && !obMsg && BX.hasClass(node, 'bx-core-waitwindow'))
obMsg = node;
if (node && !obMsg)
obMsg = BX('wait_' + node.id);
if (!obMsg)
obMsg = lastWait.pop();
if (obMsg && obMsg.parentNode)
{
for (var i = 0, len = lastWait.length; i < len; i++)
{
if (obMsg == lastWait[i])
{
lastWait = BX.util.deleteFromArray(lastWait, i);
break;
}
}
obMsg.parentNode.removeChild(obMsg);
if (node)
node.bxmsg = null;
BX.cleanNode(obMsg, true);
}
};
function _adjustWait()
{
if (!this.bxmsg)
return;
var arContainerPos = BX.pos(this),
div_top = arContainerPos.top;
if (div_top < BX.GetDocElement().scrollTop)
div_top = BX.GetDocElement().scrollTop + 5;
this.bxmsg.style.top = (div_top + 5) + 'px';
if (this == BX.GetDocElement())
{
this.bxmsg.style.right = '5px';
}
else
{
this.bxmsg.style.left = (arContainerPos.right - this.bxmsg.offsetWidth - 5) + 'px';
}
}
@genntanaka
Copy link

Спасибо, Вы спасли меня =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment