CSS Indication

README

http://www.html5-memo.com/webtips/css3-loading/ を参考にして、サイズ変更にも対応するインジケータを作ってみました。

タブレット・モバイルへの縦横の向きが変わった場合の対応については、iPad への対応のみを念頭に作りました。実機がないためテストはしていませんが。

overlay の div の opacity が全体に影響するので、circle の div 2つは div#overlay の外に出した方が良かったかもしれません。

また、div#overlay の height, width に important をつけているのは、 twitter bootstrap と一緒に使おうとしたらうまくできなかったからです。

jsdoit.css

.overlay {
    width: 100%!important;
    height: 100%!important;
    z-index: 1023;
    opacity: 0.5;
    position: fixed;
}
.outer-circle {
	background-color: rgba(0,0,0,0);
	border:25px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:25px solid rgba(0,0,0,0);
	border-left:25px solid rgba(0,0,0,0);
	border-radius:250px;
	box-shadow: 0 0 1750px #2187e7;
	width:250px;
	height:250px;
    position: fixed;
	margin: auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
}
/* 内側の小さなサークルのラインの色とスタイルとアルファで表示＆消えるアニメーション */
.inner-circle {
	background-color: rgba(0,0,0,0);
	border:25px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:25px solid rgba(0,0,0,0);
	border-right:25px solid rgba(0,0,0,0);
	border-radius:250px;
	box-shadow: 0 0 150px #2187e7; 
	width:150px;
	height:150px;
	margin: auto;
    position: fixed;
    z-index: 10;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
}

/* キーフレームを使ったローディングのくるくる回るアニメーション */
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

jsdoit.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="overlay" class="overlay" style="display:none;"> 
    <div class="outer-circle"></div>
    <div class="inner-circle"></div>
</div>   

jsdoit.js

show();
function show() {
    configure();
    $('#overlay').show('fast');
}

var timer = false;

$(window).bind("orientationchange",function(){
	configure();
}).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        configure();
    }, 100);
});

function configure() {
    var base_object = $('#overlay');
    var height = base_object.height();
    var width = base_object.width();
    base_length = Math.min(width, height) / 3;
    $('.outer-circle')
        .css('border-width', (base_length * 0.1).toString() + 'px')
        .css('border-right-width', (base_length * 0.1).toString() + 'px')
        .css('border-left-width', (base_length * 0.1).toString() + 'px')
        .css('border-radius', base_length.toString() + 'px')
        .css('box-shadow', '0 0 ' + (base_length * 0.7).toString() + ' #2187e7')
        .css('width', base_length.toString() + 'px')
        .css('height', base_length.toString() + 'px')
        .css('top', (height * 0.5 - base_length * 0.5) + 'px')
        .css('left', (width * 0.5 - base_length * 0.5) + 'px')
        .css('margin', 'auto');
    $('.inner-circle')
        .css('border-width', (base_length * 0.1).toString() + 'px')
        .css('border-right-width', (base_length * 0.1).toString() + 'px')
        .css('border-left-width', (base_length * 0.1).toString() + 'px')
        .css('border-radius', base_length.toString() + 'px')
        .css('box-shadow', '0 0 ' + (base_length * 0.3).toString() + ' #2187e7')
        .css('width', (base_length * 0.6).toString() + 'px')
        .css('height', (base_length * 0.6).toString() + 'px')
        .css('top', (height * 0.5 - base_length * 0.3) + 'px')
        .css('left', (width * 0.5 - base_length * 0.3) + 'px')
        .css('margin', 'auto');
}