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 (1731 день назад)