Топ дня: Yotun

Тема закрыта by Ivlev
Причина: Дичь

Всем ку, хочу реализовать прогресс бар при скачивании.

<progress id="progress" value="0"></progress>

 <a load="none" id="button" class="mt-2 btn w-100 btn-success" href="{{array.link}}">СКАЧАТЬ</a>

 <span id="display"></span>

 <script>

 		var progressBar = document.getElementById("progress"),

 		loadBtn = document.getElementById("button"),

 		display = document.getElementById("display");

 

 		function download() {

 			var xhr = new XMLHttpRequest();

 			xhr.open("GET", "{{array.file}}?" + Math.floor(Math.random() * 99999), true);

 			xhr.responseType = "text";

 			xhr.onprogress = function(e) {

 				if (e.lengthComputable) {

 					progressBar.max = e.total;

 					progressBar.value = e.loaded;

 					display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';

 				}

 			};

 			xhr.onloadstart = function(e) {

 				progressBar.value = 0;

 				display.innerText = '0%';

 			};

 			xhr.onloadend = function(e) {

 				progressBar.value = e.loaded;

 				loadBtn.disabled = false;

 				loadBtn.innerHTML = 'СКАЧАТЬ';

 			};

 			xhr.onload = function (e) {

 				if (this.status == 200) {

 					console.log('Готово');

 				}

 			};

 			xhr.send(null);

 		}

 

 		loadBtn.addEventListener("click", function(e) {

 			this.disabled = true;

 			this.innerHTML = "Скачивание...";

 			download();

 		});

 		</script>

 

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

Изображение

------
81565_Screenshot_20220403_225950_com.android.chrome2.jpg (11.3 Kb)
Скачиваний: 142

________
посл. ред. 03.04.2022 в 23:08; всего 1 раз(а); by Nells

 <progress id="progress" value="0"></progress>

  <a load="none" id="button" class="mt-2 btn w-100 btn-success" href="{{array.link}}">СКАЧАТЬ</a>

  <span id="display"></span>

  <script>

  		var progressBar = document.getElementById("progress"),

  		loadBtn = document.getElementById("button"),

  		display = document.getElementById("display");

  

  		function download() {

  			var xhr = new XMLHttpRequest();

  			xhr.open("GET", "{{array.file}}?" + Math.floor(Math.random() * 99999), true);

  			xhr.responseType = "text";

  			xhr.onprogress = function(e) {

  				if (e.lengthComputable) {

  					progressBar.max = e.total;

  					progressBar.value = e.loaded;

  					loadBtn.innerText = Math.floor((e.loaded / e.total) * 100) + '%';

  				}

  			};

  			xhr.onloadstart = function(e) {

  				progressBar.value = 0;

  				loadBtn.innerText = '0%';

  			};

  			xhr.onloadend = function(e) {

  				progressBar.value = e.loaded;

  				loadBtn.disabled = false;

  				loadBtn.innerHTML = 'СКАЧАТЬ';

  			};

  			xhr.onload = function (e) {

  				if (this.status == 200) {

  					console.log('Готово');

  				}

  			};

  			xhr.send(null);

  		}

  

  		loadBtn.addEventListener("click", function(e) {

  			this.disabled = true;

  			display.innerHTML = "Скачивание...";

  			download();

  		});

  		</script>

REWERK, спасибо, процент в кнопке)

Пожалуйста.

REWERK, а как можно использовать % загрузки для задания width?
width=" %"

Nells, сначала узнаешь сколько байт весит файл, потом сколько передалось
По формуле
Передалось/макс вес *100 = процент и пихаешь в width..

jasis, в js не шарю, php размер есть

Nells, это у тебя шаблонизатор блейд?
Это что ларавел?
В ява скрипте есть массив выбранного файла и там есть инфа по его весу!
________
посл. ред. 04.04.2022 в 02:37; всего 1 раз(а); by jasis

Хочешь процент заполнения кнопки?
________
посл. ред. 04.04.2022 в 07:12; всего 1 раз(а); by REWERK

Типо того