作成日:2017-12-07, 更新日:2019-05-17
特定のリンク等をトリガーにして、ローディングを表示させる。
▼Jquery側
(function($) { $.extend({ /** オプション(連想配列)から値のセット **/ getOpt: function(opt, key, defVal) { var defVal = $.getDefValNoArg(defVal, ''); var tmpVal = defVal; if ( opt!=null && opt!=undefined ) { if ( opt[key]!=null && opt[key]!=undefined ) { if ( opt[key]!='' || opt[key]===true || opt[key]===false ) { tmpVal = opt[key]; } } } return tmpVal; }, /** 引数が無い時は初期値を返す **/ getDefValNoArg: function(tmpArg, defVal) { var defVal = (defVal!=null && defVal!=undefined)? defVal: ''; return (tmpArg!=null && tmpArg!=undefined)? tmpArg: defVal; } }); })(jQuery); /** ローディング **/ var objLoading = function(opt) { var self = this; self.id = 'idLoad'; self.delLoding = function() { $('#'+self.id).remove(); } self.setLoding = function() { // ローディングCSS:https://codepen.io/Manoz/pen/pydxK var html = '<div id="'+self.id+'"><div class="ring-2"><div class="ball-holder"><div class="ball"></div></div></div></div>'; $('body').append(html); } var hackElmCss = function(elm, val) { var style = elm + ':' + val + ';' + '-moz-' + elm + ':' + val + ';' + '-webkit-' + elm + ':' + val + ';'; return style; } var hackKeyframes = function(elm, val) { var style = '@keyframes ' + elm + '{' + val + '}' + '@-moz-keyframes ' + elm + '{' + val + '}' + '@-webkit-keyframes ' + elm + '{' + val + '}'; return style; } var setCss = function(opt) { var defW = $.getOpt(opt, 'defW', 20); // ベースになるサイズ var colBig = $.getOpt(opt, 'colBig', '#4b9cdb'); // 大きい円 var colSml = $.getOpt(opt, 'colSml', '#4282B3'); // 小さい円 var rateBig = $.getOpt(opt, 'rateBig', 10); // 大きい円とベースサイズの比率 var rateborder = $.getOpt(opt, 'rateborder', 1); // 大きい円の線とベースサイズの比率 var rateSml = $.getOpt(opt, 'rateSml', 3); // 小さい円とベースサイズの比率 var key000 = hackElmCss('transform', 'rotate(0deg)'); var key100 = hackElmCss('transform', 'rotate(360deg)'); var cssKeyFrame = hackKeyframes('loadingCss', '0{'+key000+'}100%{'+key100+'}'); var style = 'html,body{height:100%;margin:0;}body{position:relative;top:0;left:0;}' + '#'+self.id+'{background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;width:100%;height:100%;}' + '#'+self.id+' .ring-2{' + 'position:relative;top:50%;left:50%;border-radius:100%;' + hackElmCss('transform','translate(-50%,-50%)') + 'width:'+(defW*rateBig)+'px;height:'+(defW*rateBig)+'px;' + 'border:'+(defW*rateborder)+'px solid '+colBig+';' + '}' + '#'+self.id+' .ball-holder{position:absolute;width:100%;height:1px;left:0;' + 'top:50%;' + '}' + cssKeyFrame + '#'+self.id+' .ball-holder{' + hackElmCss('animation-name','loadingCss') + hackElmCss('animation-duration','1.3s') + hackElmCss('animation-timing-function','linear') + hackElmCss('animation-delay','0s') + hackElmCss('animation-iteration-count','infinite') + '}' + '#'+self.id+' .ball{position:absolute;border-radius:100%;' + 'top:-'+(defW*rateSml/2)+'px;' + 'left:-'+(defW*rateSml/2+(defW*rateborder/2))+'px;' + 'width:'+(defW*rateSml)+'px;' + 'height:'+(defW*rateSml)+'px;' + 'background:'+colSml+';' + '}'; $('body').append('<style>'+style+'</style>'); } var init = function(opt){ self.loading = $.getOpt(opt, 'loading', self.id); setCss(opt); } init(opt); }
HTML側
<script> window.onunload = function(){}; var objLoad = new objLoading(); $(〇〇〇).on('click', '〇〇〇', function(){ objLoad.setLoding() }); </script>
※「window.onunload = function(){};」が無いとFirefoxでブラウザの「戻る」で戻ってきたとき、ローディングが出た状態になってしまう。
css
JqueryでCSSを出力しているので不要だけど・・・下記のような感じのCSSになっている。
html,body{ height:100%; margin:0; } body{ position:relative; top:0; left:0; } #idLoad{ background-color:rgba(0,0,0,0.8); position:fixed; top:0; left:0; width:100%; height:100%; } #idLoad .ring-2{ position:relative; top:50%; left:50%; border-radius:100%; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:200px; height:200px; border:20px solid #4b9cdb; } #idLoad .ball-holder{ position:absolute; width:100%; height:1px; left:0; top:50%; } @keyframes loadingCss{ 0{ transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); } 100%{ transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); } } @-moz-keyframes loadingCss{ 0{ transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); } 100%{ transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); } } @-webkit-keyframes loadingCss{ 0{ transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); } 100%{ transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); } } #idLoad .ball-holder{ animation-name:loadingCss; -moz-animation-name:loadingCss; -webkit-animation-name:loadingCss; animation-duration:1.3s; -moz-animation-duration:1.3s; -webkit-animation-duration:1.3s; animation-timing-function:linear; -moz-animation-timing-function:linear; -webkit-animation-timing-function:linear; animation-delay:0s; -moz-animation-delay:0s; -webkit-animation-delay:0s; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } #idLoad .ball{ position:absolute; border-radius:100%; top:-30px; left:-40px; width:60px; height:60px; background:#4282B3; }
関連項目
・javascript ブラウザの「戻る」で前のページのjquery等が実行されたままなので防ぐ