1
  1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
Приветствуем вас,Гость, на форуме IFUD.WS. Обязательно рекомендуется к прочтению правила форума http://ifud.ws/threads/obnovleno-pravila-foruma.7759

Прогресс бар на JavaScript

Тема в разделе "Программирование", создана пользователем Dodger, 29 авг 2015.

  1. TopicStarter Overlay
    Dodger

    Dodger

    Регистрация:
    28 фев 2015
    Сообщения:
    34
    Симпатии:
    35
    Данный скрипт реализует анимацию прогресс бара, имитирующий индикатор загрузки. Скорость анимации, цвет, размеры и другие параметры прогресс бара можно задавать в скрипте. Использовать прогресс бара можно в любом месте документа, вызвав его функцией Load_run().

    Создаем функцию и основные элементы прогресс бара:
    functionLoad_run(){
    var body = document.getElementsByTagName('body')[0];
    var divC = document.createElement('div');
    var divR = document.createElement('div'); // ползунок
    var divRC = document.createElement('div'); // ползунок
    var pText = document.createElement('p'); // текст
    var prNum = 0;
    divC.appendChild(divR);
    divC.appendChild(divRC);
    divC.appendChild(pText);
    pText.innerHTML = "...";
    body.appendChild(divC);

    Создаем функцию для анимации бегунка:
    var a = setInterval (function() {
    divRC.style.backgroundColor = '#F08080';
    prNum+= 6; // в prNum+= в значение можно подставить любое целое число больше нуля
    pText.innerHTML = "Идет загрузка: "+prNum+" %";
    divRC.style.width = prNum+"px";
    if (prNum >= 100 ) {
    pText.innerHTML = "Загрузказавершена";
    divRC.style.width = 100+"px";
    clearInterval(a);
    }
    },500); // где 500 - это скорость анимации, можно увеличивать или уменьшать

    \Добавляем CSS стили к созданным элементам и вызываем функцию:

    divC.style.border = 'dotted'; // стиль границы
    divC.style.backgroundColor = "#F5F5F5"; // цвет фона
    divC.style.borderColor = '#E6E6FA'; // цвет рамки
    divC.style.position = 'absolute'; // позиционирование в документе
    divC.style.width = 320; // ширина
    divC.style.height = 75; // высота
    divC.style.marginTop = 20; // отступ сверху
    divR.style.borderRadius = 5; // округление рамки
    divR.style.width = 99; // ширина
    divR.style.height = 10; // высота
    divR.style.backgroundColor = '#FFF0F5'; // цвет фона бегунка
    divR.style.borderRadius = 5; // округление рамки
    divR.style.border = "groove"; // стиль рамки
    divR.style.marginTop = 20; // отступ сверху
    divR.style.position = 'fixed';
    divR.style.marginLeft = 20; // отступ слева
    divRC.style.borderRadius = 4; // округление рамки
    divRC.style.zIndex = 999;
    divRC.style.marginTop = 23; // отступ сверху
    divRC.style.marginLeft = 22; // отступ слева
    divRC.style.height = 10; // высота
    divRC.style.position = 'relative';
    pText.style.marginTop = -13; // отступ сверху
    pText.style.marginLeft = 140; // отступ слева
    pText.style.fontSize = 14+"px"; // размер шрифта
    pText.style.fontFamily = "sans-serif"; // название шрифта
    pText.style.fontWeight = "bolder"; // начертание шрифта
    pText.style.textAlign = 'center'; // расположение текста
    }
    Load_run();
    ----------------Скрипт полностью:-------------------------
    function Load_run() {
    var body = document.getElementsByTagName('body')[0];
    var divC = document.createElement('div');
    var divR = document.createElement('div');
    var divRC = document.createElement('div');
    var pText = document.createElement('p');
    var prNum = 0;
    divC.appendChild(divR);
    divC.appendChild(divRC);
    divC.appendChild(pText);
    pText.innerHTML = "...";
    body.appendChild(divC);
    var a=setInterval (function() {
    divRC.style.backgroundColor='#F08080';
    prNum+=6;
    pText.innerHTML = "Идет загрузка: "+prNum+" %";
    divRC.style.width = prNum+"px";
    if (prNum >= 100 ) {
    pText.innerHTML = "Загрузка завершена";
    divRC.style.width = 100+"px";
    clearInterval(a);
    }
    },500);
    divC.style.border = 'dotted';
    divC.style.backgroundColor = "#F5F5F5";
    divC.style.borderColor = '#E6E6FA';
    divC.style.position = 'absolute';
    divC.style.width = 320;
    divC.style.height = 75;
    divC.style.marginTop = 20;
    divR.style.borderRadius = 5;
    divR.style.width = 99;
    divR.style.height = 10;
    divR.style.backgroundColor = '#FFF0F5';
    divR.style.borderRadius = 5;
    divR.style.border = "groove";
    divR.style.marginTop = 20;
    divR.style.position = 'fixed';
    divR.style.marginLeft = 20;
    divRC.style.borderRadius = 4;
    divRC.style.zIndex = 999;
    divRC.style.marginTop = 23;
    divRC.style.marginLeft = 22;
    divRC.style.height = 10;
    divRC.style.position = 'relative';
    pText.style.marginTop = -13;
    pText.style.marginLeft = 140;
    pText.style.fontSize = 14+"px";
    pText.style.fontFamily = "sans-serif";
    pText.style.fontWeight = "bolder";
    pText.style.textAlign = 'center';
    }
    Load_run();
    Please login or register to view links
     
    • Like Like x 7
    Метки:
  2. Favertes

    Favertes

    Регистрация:
    14 апр 2015
    Сообщения:
    65
    Симпатии:
    27
  3. TopicStarter Overlay
    Dodger

    Dodger

    Регистрация:
    28 фев 2015
    Сообщения:
    34
    Симпатии:
    35
    yes
     
  4. Favertes

    Favertes

    Регистрация:
    14 апр 2015
    Сообщения:
    65
    Симпатии:
    27
    it infects online
     
  5. TopicStarter Overlay
    Dodger

    Dodger

    Регистрация:
    28 фев 2015
    Сообщения:
    34
    Симпатии:
    35
    This is a normal progress bar / Это обычный прогресс бар
     

Поделиться этой страницей

Загрузка...