Bymas | Прогресс бар при скачивании

Топ дня:

Сталин [БАН]

Тема закрыта by

Ivlev
Причина: Дичь

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

html

   <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)
Скачиваний: 183

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

javascript

   <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 , спасибо, процент в кнопке)

Nells (03.04.2022 в 23:22)
REWERK , спасибо, процент в кнопке)

Пожалуйста.

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

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

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

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

Nells (03.04.2022 в 23:47)
REWERK , а как можно использовать % загрузки для задания width?
width=" %"

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

REWERK (04.04.2022 в 07:12)

Хочешь процент заполнения кнопки?

Типо того