ローディングの%表示をJavaScriptの記述で実装する方法
1340 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
ローディングの最中に%の表示をして100%になったらローディング画面が無くなるのをJavaScriptで実装しようと思いネットの記事を探してやろうとしたのですが私が探した限りは見つけることができませんでした。
ローディングバーやローディング 中にローディングアイコンが動くのを解説した記事はありましたが。
そこで自分で実装したので実装方法の解説をします。
それでは解説します。
デモ画面
デモ画面はここから見ることができます。
HTML
CSSの解説はしないのでコードを見て自分で理解してください。
CSS
JavaScirpt
まずは%が変化する部分の解説です。
%が変化する部分
ローディングの部分のコードはHTMLの11行目〜14行目です。
%が0から始まって100になったらローディングの表示が消えてHTMLの15行目〜17行目が表示されます。
%が増えていくコードはJavaScriptのコードの16行目〜23行目です。
最初の0%の「0」はJavaScriptのコードの14行目です。
一定時間ごとに%の数字が変化していくのに「setInterval」を使いますが0%から100%になるまでに3秒かかるようにします。
だから数字が1つ変化するのに0.3秒かけます。（0%から100%になるのに101文字変化するので正確には3.3秒かかりますが体感として分からないです）
「0.3秒」はJavaScriptのコードの23行目の「30」です。
変化した数字をHTMLのコードの13行目に代入するのがJavaScriptのコードの18行目で%の数字が1ずつ増えるのが19行目です。
18行目の「value」ですがJavaScriptのコードの3行目で取得しています。
このままだと数字はずーっと増えていきますが100%になったら数字が増えるのを止めるためのコードがJavaScriptの20行目〜22行目で「ClearInterval」で数字が増えるのを解除しています。
これで%が変化する部分の解説が終わったので次はローディングを表示して非表示になる部分の解説です。
ローディングを表示して非表示になる部分
JavaScriptのコードの7行目の「window.addEventListener(‘load’」ですが「HTMLの読み込みが終わったら」という意味です。
JavaScriptのコードの9行目〜11行目はローディングを非表示にするための記述ですがHTMLのコードの11行目にCSSのopacityクラス（CSSのコードの29行目〜33行目）をつけることで実現しています。
JavaScirptのコードの9行目〜11行目のコードを13行目で実行していますが3秒後に実行されます。
JavaScriptのコードの5行目〜14行目はの意味は「HTMLの読み込みが終わったら3秒後にローディング部分の表示を非表示にする」ということです。
これでローディングの完成です。