При выполнении каких-либо аякс-запросов, стоит показывать пользователю, что система что-то делает, а не просто зависла. Для этих целей пользователю нужно показать прелоадер. в арсенале 1С-Битрикс есть соответствующие функции под данную задачу, вот только прелоадер, который данные функции показывают - слишком примитивный :( Поэтому достаточно распространенная задача менять данный прелоадер на что-то своё, более красивое.
Для того чтобы заменить стандартный прелоадер на что-то свое, достаточно всего лишь переопределить функции "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(); };
Таким образом, при показе прелоадера, в body будет добавляться текст прелоадера с контейнером, а при скрытии данный элемент будет просто удаляться. В примере функции реализованы с помощью JQUERY для большей наглядности, но тоже самое можно реализовать и через BX.js
Дальше нужно добавить стилей самого прелоадера:
.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); } }
Таким образом получим крутящиеся по центру экрана синие (цвета можете поставить свои) часы... Вот такой получился прелоадер на чистом css :)