作成日: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等が実行されたままなので防ぐ