【JavaScript】プログレスバーでダウンロード状況を表示 → 完了後実行する方法

ダウンロードの進捗状況を表示する、よく見かけるプログレスバーをブラウザで実現したいと思います。

JavaScriptでサーバーにあるデータ(動画、写真等指定なし)をダウンロード
ダウンロード状況をパーセント表示し、ダウンロード完了(100%)
alert("ダウンロード完了");

下記URLでは、まだJSのコードが不十分で、うまく動作しません。
緑のバーがテテーン♪と進んで欲しいです。
https://jsfiddle.net/7u586411/2/

具体的な質問内容が書けず申し訳ありませんが、
ご指摘いただければ、解決に近づけるかもしれません。

頑張ります。よろしくお願いいたします。

HTML
1<div id="meter">
2<p id="bar"><span></span></p>
3<p id="now">now loading...</p><p id="percent"></p>
4</div>

CSS
1
2#meter {
3
4	position: absolute;
5	margin: auto;
6
7	top: 0;
8	right: 0;
9	bottom: 0;
10	left: 0;
11
12	width: 200px;
13	height: 30px;
14
15	z-index: 20;
16
17
18}
19
20
21#now {
22
23	position: absolute;
24	margin: auto;
25
26	top: 25px;
27	right: 0;
28	bottom: 0;
29	left: -40;
30
31	text-align: center;
32	font-size: 15px;
33
34        font-family: arial;
35        font-weight: bold;
36
37	color: #ffffff;
38
39	z-index: 20;
40
41}
42
43#percent {
44
45	position: absolute;
46	margin: auto;
47
48	top: 25px;
49	right: 0;
50	bottom: 0;
51	left: 95;
52
53	text-align: center;
54	font-size: 15px;
55
56        font-family: arial;
57        font-weight: bold;
58
59	color: #ffffff;
60
61	z-index: 20;
62
63}
64
65
66#bar {
67
68	position: absolute;
69	margin: 0 0 0 0;
70
71	width: 200px;
72	height: 15px;
73
74	text-align: center;
75
76	border:2px solid #ffffff;
77	background: #00FF00;
78
79        -webkit-border-radius: 20px;
80        -ms-border-radius: 20px;
81
82	z-index: 20;
83
84}
85
86#bar span{
87
88	position: absolute;
89	margin: auto;
90	float: left;
91
92	top: 0;
93
94	bottom: 0;
95	left: 0;
96
97	background: #00FF00;
98	display: block;
99	height: 15px;
100
101
102        -webkit-border-radius: 20px;
103        -ms-border-radius: 20px;
104	z-index: 20;
105	
106}
107

JavaScript
1$(document).ready(function() {
2
3	var xhr = new XMLHttpRequest
4	xhr.open('GET', 'index.html');
5	xhr.onprogress = function (evt) {
6
7	var load = (100*evt.loaded/evt.total|0);
8	$('#percent').html(load + '%');
9	$('#bar span').css({'width': load*2});
10	};
11
12	xhr.send();
13
14});

行動規範の内容に同意します

回答2件

onreadystatechange を追加すれば完了のイベントは取れます。

javascript
1$(document).ready(function() {
2	var xhr = new XMLHttpRequest
3	xhr.open('GET', 'index.html');
4	xhr.onprogress = function (evt) {
5	  var load = (100*evt.loaded/evt.total|0);
6	  $('#percent').html(load + '%');
7	  $('#bar span').css({'width': load*2});
8	};
9	xhr.onreadystatechange = function (evt) {
10	  if (xhr.readyState === 4) {
11	    if (xhr.status === 200) {
12	      alert('ダウンロード完了');
13	    }
14	  }
15	}
16	xhr.send();
17});

テテーン♪と表示されないのはダウンロードしているコンテンツが小さいのかと思います。

追記

大きいファイルで試した結果を置いておきます。

投稿2017/07/05 02:28

編集2017/07/05 04:51

mattn

総合スコア5030

phiilo_

2017/07/05 03:40

ご回答ありがとうございます。データが軽いから読み込みが一瞬で終わるんでしょうね。頂いたコードですと0%となってしまうままのようです... 頑張ってみます。ありがとうございました。

mattn

2017/07/05 03:43

0 の次が 100 でしょうから、完了時に 100 を表示する様にした方がいいかもですね。

mattn

2017/07/05 04:51

キャプチャを貼りました。ちなみに450MBのファイルです。

phiilo_

2017/07/05 11:52

お返事が遅くなり申し訳ありませんでした。確かに重たいデータを指定したら0%から値がインクリメントされ 100%あたりでテテーン♪となりました。現状ではプログレッシブバーがデフォルトでマックスパワーゲージとなってしまい、mattnさんの.gifのようにピロピロピロ♪となりません。 HTMLでは<progress>というタグがあり関心しました。色々見てみます。ありがとうございました。

行動規範の内容に同意します

自己解決

CSSが間違っており、軽いデータだったため、値がインクリメントしていくのを
視認できなかったようです。

HTML
1<html>
2
3
4    <head>
5
6    <script>
7
8        $(document).ready(function() {
9	
10            var client = new XMLHttpRequest();
11
12            client.open('POST', './----.mov');
13            client.onprogress = function(event) {
14
15                var load = (100*event.loaded/event.total|0);
16                $('#percent').html(load + '%');
17                $('#bar span').css({'width': load + '%'});
18            };
19
20            client.send();
21        });
22
23    </script>
24
25    <style>
26
27
28        #percent {
29
30            position: absolute;
31            margin: auto;
32
33            top: 25px;
34            right: 0;
35            bottom: 0;
36            left: 95;
37
38            text-align: center;
39            font-size: 15px;
40
41                font-family: arial;
42                font-weight: bold;
43
44            color: #ffffff;
45
46            z-index: 20;
47
48        }
49
50
51        #bar {
52
53            position: absolute;
54            margin: 0 0 0 0;
55
56            width: 200px;
57            height: 15px;
58
59            text-align: center;
60
61            border:2px solid #ffffff;
62
63
64                -webkit-border-radius: 20px;
65                -ms-border-radius: 20px;
66
67            z-index: 20;
68
69        }
70
71        #bar span{
72
73            position: absolute;
74            margin: auto;
75            float: left;
76
77            width: 200PX;
78            top: 0;
79
80            bottom: 0;
81            left: 0;
82
83            background: gray;
84            display: block;
85            height: 15px;
86
87
88                -webkit-border-radius: 20px;
89                -ms-border-radius: 20px;
90            z-index: 20;
91
92        }
93    </style>
94    </head>
95<body>
96
97<p id="bar"><span></span></p>
98<p id="percent"></p>
99
100</body>
101</html>
102