Как сделать прогресс бар с данными?

Question

[Андрей]

Добрый день, такая задача, у меня есть прогресс бар который плавно бежит 60 секунд https://jsfiddle.net/g5bgrfy2/. Суть в том, что если данные загрузились полностью, например на 40ой сек нужно чтобы линия резко добежала до конца.

Answer 1

[Stalker_RED]

например так:
https://jsfiddle.net/Stalk/mLu8v4k6/
можно наводить красоту меняя задержки, добавляя скругленные уголочки и т.д.
Естественно, set() и complete() можно запускать не по таймерам, а по каким-то вашим событиям.

Comments

[Андрей]

что нужно добавить, чтобы она пропадала после загрузки?

[Stalker_RED]

Андрей Шамрай: например, в конце функции go вставиоть что-то типа такого

if (progress >= 100) { progressbar.style.display = 'none' }

Answer 2

[lega]

jsfiddle.net/lega911/aye457d0

Answer 3

[Павел Елизарьев]

Средствами CSS - никак. Вам надо контроллировать процесс загрузки. По факту загрузки надо будет резко увеличить скорость (это можно сделать и через CSS).

У бутстрапа есть хороший скролл: getbootstrap.com/components/#progress.
И у jQuery: https://api.jqueryui.com/progressbar/

Вот неплохое решение вашей задачи с объяснениями: incode.pro/jquery/ajax-na-praktike-progress-bar-in...