サクッとできるローディングアニメーション実装3つ
サクッと出来るシリーズのローディングアニメの作り方です。
良くあるのから、どれ位読み込んでるのか分かるのまで
よくあるやつ
クルクル回ってるやつです。
ちなみに読み込むと消えるので、スーパーリロードしてください。
Google chromeで
[windows: Shift + F5]
[mac: Cmd + Shift + R]
Demo
Html
黒バックのレイヤーとクルクルのレイヤーです。
1 2 3 4 5 |
<div id="loadingWrap"> <div id="loading"></div> </div> |
css
#loadingWrapが黒バックで#loadingがクルクルです。
.loadingNoneで読み込んだら1秒後に消える仕様にしてます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#loadingWrap { width: 100%; height: 100vh; background: #000; position: fixed; top: 0; left: 0; z-index: 10; } #loading { width: 5em; height: 5em; border-top: 1em solid rgba(255, 255, 255, 0.2); border-right: 1em solid rgba(255, 255, 255, 0.2); border-bottom: 1em solid rgba(255, 255, 255, 0.2); border-left: 1em solid rgba(255, 255, 255, 1); animation: loaderAnime 1s infinite linear; border-radius: 50%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 11; } @keyframes loaderAnime { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loadingNone { animation: loadingAnime 1s forwards; } @keyframes loadingAnime { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; display: none; } } |
javascript
読み込んだら、loadingNoneクラスを付けるってやってるだけです。
1 2 3 4 5 6 |
var loadingWrap = document.getElementById('loadingWrap'); window.addEventListener('load', function() { loadingWrap.classList.add('loadingNone'); }); |
読み込み具合が%でカウントされるやつ
現在の読み込み具合が何%かで表示されていく感じです。
Demo
html
id=”loadRatioArea”に数字が書き込まれていきます。
1 2 3 4 5 |
<div id="loading"> <p class="text"><span id="loadRatioArea"></span>% 読み込み完了</p> </div> |
css
#loadingが黒バックで、.textが文字全体を囲って真ん中に表示させている所です。
#loadingNoneは上と同じで消す為のクラスです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#loading { width: 100vw; height: 100vh; background: #000; position: fixed; top: 0; left: 0; z-index: 10; } .text { height: calc(3rem + 5px); text-align: center; color: #fff; font-size: 2rem; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 11; } #loadRatioArea{ font-size: 3rem; margin: 0 0.3em; } .loadingNone { animation: loadingAnime 1s forwards; } @keyframes loadingAnime { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; display: none; } } |
javascript
画像の数を数えて、それを100で割って、それが読み込まれたら足していっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var images = document.getElementsByTagName('img'); var loadRatioArea = document.getElementById('loadRatioArea'); var loadingArea = document.getElementById('loading'); var imgLen = images.length; var oneLoadRatio = 100 / imgLen; var loadRatio = 0; for (var i = 0; i < imgLen; i++) { images[i].onload = function() { loadRatio = loadRatio + oneLoadRatio; loadRatioArea.innerHTML = Math.round(loadRatio); if(loadRatio >= 100) { loadingArea.classList.add('loadingNone'); } } } |
読み込み具合によって、棒が伸びるやつ
読み込み具合で棒が伸びていくやつです。
ファミコンとかのローディングってこんなイメージです。
Demo
html
id=”loading”が黒バックで、id=”loading_bar”が棒です。
1 2 3 4 5 6 7 8 |
<div id="loading"> <div id="loading_barWrap"> <p class="text">読み込み中</p> <div id="loading_bar"></div> </div> </div> |
css
#loading_barWrapで棒と読み込み中の文字を真ん中に持ってきて、100%の時の横幅を決めてます。
#loading_barは横幅0にして読み込み具合で#loading_barWrapの大きさまで広げます。
transition-duration: 1s;で大きさが変わった時のアニメーションの時間を設定しています。今は1秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
#loading { width: 100vw; height: 100vh; background: #000; position: fixed; top: 0; left: 0; z-index: 999; } #loading_barWrap { width: 30vw; height: calc(1rem + 5px); position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #loading_bar { width: 0; height: 5px; background: #fff; transition-duration: 1s; } .text { text-align: center; color: #fff; } .loadingNone { animation: loadingAnime 1s forwards; } @keyframes loadingAnime { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; display: none; } } |
javascript
さっきと同じく画像の数を数えて100で割ってます。
それが読み込まれたら横幅を%をloading_barに付けていっています。
そのまま消しちゃうとアニメーションを待たずに消えちゃうので、setTimeoutで毎秒監視して、横幅がloading_barWrapの幅になったらloadingNoneクラスを付けて消します。
loadingNoneクラスが付いてたら監視終了です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var images = document.getElementsByTagName('img'); var loadingBar = document.getElementById('loading_bar'); var loadingWrap = document.getElementById('loading_barWrap'); var loadingArea = document.getElementById('loading'); var imgLen = images.length; var barLen = 100 / imgLen; console.log(barLen); var barWidth = 0; for (var i = 0; i < imgLen; i++) { images[i].onload = function() { barWidth = barWidth + barLen; loadingBar.style.width = barWidth + '%'; } } function loadLen() { if (!loadingArea.classList.contains('loadingNone')) { if (loadingBar.clientWidth === loadingWrap.clientWidth) { loadingArea.classList.add('loadingNone'); } else { setTimeout(loadLen, 1000); } } } // 100%にならなかった時用の処理 window.addEventListener('load', function(){ if (!loadingArea.classList.contains('loadingNone')) { loadingBar.style.width = '100%'; setTimeout(function(){ loadingArea.classList.add('loadingNone'); }, 1000); } }); |
chromeだけだと、setTimeoutでなくオブザーバー(ResizeObserver)で監視出来るので、chromeだけでいいよって人か、他のブラウザが対応されたよって時は以下のオブザーバーでも監視できます。
まあそうなった時はES6の記述でいいと思いますが。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var observer = new ResizeObserver(function(monitoring) { if (monitoring[0].contentRect.width === loadingWrap.clientWidth) { loadingArea.classList.add('loadingNone'); } }); observer.observe(loadingBar); if (loadingBar.classList.contains('loadingNone') === true) { observer.disconnect(); } |
以上です。変だったり、こうした方がいいよとかあったら教えてください。
よろしければコメントをどうぞ