Progress bar component js code
Примечание:
Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.
Страница, объединяющая все компоненты в единый список, расположена по ссылке: Хаб компонентов.
function getBar(progress) {
var bar = BAR_TEXT + ' [';
var stage = Math.ceil(progress * STAGE_RATIO);
for (var i = 1; i <= BAR_WIDTH; i++) {
if (stage >= i) {
bar += '=';
} else {
bar += ' ';
}
}
bar += '] ';
if (progress === 100) {
bar += COMPLETE_TEXT;
} else {
if (progress < 10) {
bar += ' '
}
bar += progress + '%';
}
return bar;
}
document.addEventListener('DOMContentLoaded', function () {
var barElem = document.querySelector('.bar');
var contentElem = document.querySelector('.content');
var initButton = document.querySelector('.init-button');
var loadingText = document.querySelector('.loading-text');
initButton.innerHTML = BUTTON_TEXT;
function onFinish() {
contentElem.style.display = 'block';
if (HIDE_BAR_AFTER_FINISH) {
barElem.style.display = 'none';
}
}
var initialTick = true;
var onClickInit = function () {
if (HIDE_BUTTON_AFTER_INIT) {
initButton.style.display = 'none';
} else {
initButton.innerHTML = BUTTON_TEXT_AFTER_INIT;
initButton.removeEventListener('click', onClickInit);
initButton.style.color = '#000';
}
if (LOADING_TEXT) {
loadingText.style.display = 'block';
loadingText.innerHTML = LOADING_TEXT;
}
var progress = 0;
var tick = function () {
barElem.innerHTML = getBar(progress);
progress += PROGRESS_STEP;
requestAnimationFrame(function () {
if (progress <= 100) {
setTimeout(tick, initialTick ? INITIAL_TICK_TIMEOUT : TICK_INTERVAL);
initialTick = false;
} else {
barElem.innerHTML = getBar(100);
onFinish();
}
});
};
tick();
};
initButton.addEventListener('click', onClickInit);
});версия страницы: 1, Последняя правка: 11 Фев. 2020, 19:11 (2095 дней назад)

