• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание простого индикатора загрузки JS + CSS (Простой индикатор загрузки картинки на Jquery и CSS)
Создание простого индикатора загрузки JS + CSS
Kosten
Дата: Четверг, 2019-09-12, 20:08 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Самый простой, но достаточно маленький виджет индикатора выполнения, использующий HTML-CSS-JavaScript. Это графический элемент управления для визуализации хода изменения переменной JavaScript внутри диапазона (обычно 0-100). Используйте это, чтобы указать загрузку, передачу файла или прогресс установки. Графика сопровождается текстовым представлением прогресса в процентном формате.

Вы можете увидеть предварительный просмотр ниже, как отображается адаптивный виджет, но, конечно, вы можете настроить его вид:



Загрузите пакет .zip, содержащий файлы .html, .css и .js, и их можно использовать «из коробки» или скопировать только те фрагменты, которые вам нужны.

Вызовите функцию drawszlider, когда вы хотите обновить слайдер. Первый параметр - полная длина бара (обычно 100), а второй - прогресс. Функция рассчитывает процент и обновляет ползунок

Код
<body onload="drawszlider(121, 56);">

Скопируйте в свой HTML-код следующий фрагмент кода, где вы хотите, чтобы слайдер отображал. По умолчанию он занимает всю ширину своего контейнера, но вы можете изменить это в CSS.

Код
<div id="szlider">
    <div id="szliderbar">
    </div>
    <div id="szazalek">
    </div>
</div>

Вы должны стилизовать индикатор выполнения и текст, указывающий фактический процент. CSS по умолчанию для начальной точки:

Код
#szlider{
    width:100%;
    height:15px;
    border:1px solid #000;
    overflow:hidden; }
#szliderbar{
    width:37%;
    height:15px;
    border-right: 1px solid #000000;
    background: #d65946; }
#szazalek {
    color: #000000;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    left: 25px;
    position: relative;
    top: -16px;
}

Наконец, очень короткий и простой код JavaScript . Вам нужно будет вызвать эту функцию, чтобы нарисовать ползунок. У него есть два атрибута: первый - полная ширина, а второй - фактическое состояние. Например, если вы хотите отобразить 50 процентов, вызовите функцию drawszlider (100,50), но вы получите тот же результат для drawszlider (30,15).

Код
function drawszlider(ossz, meik){
    var szazalek=Math.round((meik*100)/ossz);
    document.getElementById("szliderbar").style.width=szazalek+'%';
    document.getElementById("szazalek").innerHTML=szazalek+'%';
}

Эти фрагменты кода могут содержать некоторые ошибки кодировки символов, вызванные веб-браузерами, поэтому я рекомендую загрузить пакет .zip!

Демонстрация
Прикрепления: 3912369.png(1.7 Kb) · slider-ruwix.zip(1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание простого индикатора загрузки JS + CSS (Простой индикатор загрузки картинки на Jquery и CSS)
  • Страница 1 из 1
  • 1
Поиск: