Хочу поделиться функцией отображающей анимацию загрузки из Битрикса24:
Сама JS библиотека находится /bitrix/js/main/loader (возможно она существует и в 1С-Битрикс: УП, проверяйте)
Вот сама функция отображения прелоадера:
function showLoader (params) {
let overlay = BX.create("div", {
style: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
'z-index': 3000,
transform: 'translateZ(0)',
overflow: 'hidden',
display: 'block',
'pointer-events': 'auto',
'background-color': params.color,
opacity: params.opacity,
}
});
let loader = null;
if (params.node) {
if (params.loader === null) {
loader = new BX.Loader({
target: overlay,//params.node,
size: params.hasOwnProperty("size") ? params.size : 40
});
BX.append(overlay, params.node)
} else {
loader = params.loader;
}
loader.show();
}
return loader;
}
|
Функция создает оверлей (затемнение фона) и на нем отображает анимацию прелоадера.
Вызывает функция (обычно во время загрузки данных) с параметрами:
let paramsShow = {
node: BX(document.querySelector('body')), //node внутри которой нужно отобразить прелоадер
loader: null, //если прелоадер уже существует, то отправляем его в этот параметр
size: 150, //размер прелоадера (px)
opacity: .7, прозрачность затемнения (от 0 до 1)
color: '#fff', цвет затемнения
}
let loader = showLoader(paramsShow);
|
После того, как выши данные загрузились скрываем прелоадер. Функция скрытия:
function hideLoader (params) {
if (params.loader !== null) {
params.loader.hide();
}
if (params.loader.currentTarget) {
BX.remove(params.loader.currentTarget);
}
if (params.loader !== null) {
params.loader = null;
}
}
|
и вызывается:
let paramsHide = {
loader: loader, // лоадер который мы получили при отображении
}
hideLoader(paramsHide);
|
Все довольно легко, но если есть вопросы, пишите.