Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal é o seguinte, eu preciso mostrar uma barra de progresso quando o usuário clica no botão 'download'. Hoje acontece o seguinte. Quando o usuário clica no botão o arquivo começa a realizar o download mas só mostra a tela para realmente salvar quando termina o download. Então enquanto ele está baixando o arquivo eu gostaria de colocar uma barra de progresso.
Então qual é minha dúvida. Qual é a tag, retorno, enfim. Qual código utilizo para saber qual a posição do progresso do download?
Obrigado. Estou utilizando este código para o barra de progresso. Só preciso do retorno agora do navegador, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css](http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60%" aria-valuemin="0" aria-valuemax="60%" style="width:60%">
60%
</div>
</div>
</div>
</body>
</html>>
O JQuery UI possui este recurso
https://jqueryui.com/progressbar/#download
Rodrigo, havia visto este poste. Mas como vou setar a variável e dar tela de armazenamento quando eu termino o download?
Se der uma olhada na implementação vai ver que ele possui um evento que é executado quando termina de baixar o arquivo. Dentro desta função você coloca a funcionalidade que quiser.
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
dialog.dialog( "option", "buttons", [{
text: "Close",
click: closeDownload
}]);
$(".ui-dialog button").last().focus();
}
});>
Se der uma olhada na implementação vai ver que ele possui um evento que é executado quando termina de baixar o arquivo. Dentro desta função você coloca a funcionalidade que quiser.
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
dialog.dialog( "option", "buttons", [{
text: "Close",
click: closeDownload
}]);
$(".ui-dialog button").last().focus();
}
});Muito obrigado, Rockrgo. Estou apanhando muito deste script. Você conseguiria postar um exemplo pra mim? por favor?
no link que passei tem o exemplo do código lá. Só clicar em view source
Amigo eu fiz um gerenciador de download e ultilizei o blob procura ai sobre html5 blob veja como ficou em meu site www.vemdemusica.esy.es
O JQuery UI possui este recurso
https://jqueryui.com/progressbar/#download