Полоса загрузки для сайта на CSS + JS
До этого был материал индикатор прокрутки страницы, где чем то они аналогичны по своим функциям. Это эта прокрутка очень простая и главное отлично работает. Где при желании можно самостоятельно сделать свое оформление. Который впишется в основной дизайн сайта, где больше материалу, тем больше она идет в своем появление. Если мало информации, то линия быстро пробежит, вообщем от размера контента еще зависит.
Так выглядит при проверки:
#kemalson_evitaled <
position: fixed;
left: 0;
top: 0;
width: 0%;
height: 3px;
background: #5d5dbf;
>
var line = document.getElementById(‘kemalson_evitaled’);
window.addEventListener(‘scroll’, progressBar);
function progressBar(e) <
var windowScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var windowHeight = document.documentElement.scrollHeight —
document.documentElement.clientHeight;
var width_progress_line = windowScroll / windowHeight * 100;
line.style.width = width_progress_line + ‘%’;
>
Если разобрать, что означает Progress Bar, то это оригинальная линия прогресса, что идет под своей стилистикой, и безусловно начнет свое увеличение по мере прокрутки страницы.
Курсы javascript
Он тут ни при чём. По предложенным ссылкам (второй, как минимум) определяется размер файла во временной директории (/tmp), куда изначально сохраняется файл при загрузке.
Понятное дело, что скрипт должен запрашиваться во время загрузки файла.
12.10.2011, 16:44
Интересующийся
Регистрация: 21.04.2011
Сообщений: 21
melky,
ну ob_clean() там и рядом не валялся! а вот за ссылки огромное спасибо, ато я всё думал как-бы узнать процент загрузки файла, ведь скрипт на стороне сервера запустится только после полной загрузки, а изобретать, как теперь оказалось велосипед, не было времени.
17.01.2012, 20:11
Новичок на форуме
Регистрация: 17.01.2012
Сообщений: 2
Вот валидный пример решения данной задачи:
Php+Ajax полоса загрузки ProgressBar
В статье описанно как сделать полосу загрузки (прогресс-бар ) с использованием чистого JavaScript и PHP , никаких флешей и ob_clean() . Все по грамотному, с помощью AJAX.
Как сделать прогресс бар?
Как сделать полосу загрузки или прогресс бар?
Вот к примеру как на изображении.
Чтобы от 0 до 1000 доходил за 5 секунд, ну и там где цифра 1000 справа считало все это время.
Может есть какие-то готовые решения по этому поводу?
- Вопрос задан более трёх лет назад
- 4105 просмотров
1 комментарий
Оценить 1 комментарий
Создание полосы состояния загрузки
Здравствуйте, подскажите пожалуйста как можно создать полосу загрузки какого-нибуть файла на сервер. Например загрузка аватара, когда юзер пытаеться его загрузить то показываеться полоса состояния (1% — 100%). Как ее можно создать. Заранее спасибо.
Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
задан 30 мая 2011 в 20:40
435 5 5 золотых знаков 10 10 серебряных знаков 25 25 бронзовых знаков
Для аватара в этом нет смысла =) Он маленький и загрузится быстро. А вообще, много плагинов для jQuery, например, кои делают это.
30 мая 2011 в 20:50
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Прогресс не стоит на месте ))) https://github.com/valums/file-uploader
Отслеживать
ответ дан 31 мая 2011 в 4:58
89 5 5 бронзовых знаков
Полоса загрузки она же по «научному» statusbar или progressbar. Введите в гугл progressbar jquery и выбирайте. По первой ссылке вроде был не плохой плагин http://plugins.jquery.com/project/jQueryProgressBar. Рекомендую также разобраться с http://jqueryui.com/demos/progressbar/
Отслеживать
ответ дан 31 мая 2011 в 15:28
makregistr makregistr
3,231 4 4 золотых знака 19 19 серебряных знаков 25 25 бронзовых знаков
На jQuery, основа которого jаvasript, нет возможности сканировать размер переданной части файла, яваскрипт нужен для обработки событий и простых вычислений в браузере. Есть уйма решений на технологии flash, называются приблизительно так «flash download bar», ещё есть технология java, на ней вроде тоже реализована эта возможность, но требуется установка у пользователя приличного размера плагина виртуальной java-машины; для отображения флеша необходимая примочка уже имеется в новых браузерах.