概要
spin.js はローティング画面を簡単に実装できる JavaScript のライブラリです
今回は HTML と JavaScript だけを使って spin.js の動きを確認してみました
環境
- macOS X 10.12.6
- nginx 1.10.1
- spin.js 2.3.2
HTML 作成
- vim index.html
<html>
<head>
<style type="text/css">
<!--
#layer {
width : 100%;
height : 100%;
background-color : blue;
position : absolute;
opacity: 0.1;
}
-->
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://spin.js.org/spin.min.js"></script>
</head>
<body>
<div id="layer"></div>
<div id="test_spin">spin_area</div>
<div id="stop">stop</div>
<script type="text/javascript" src="/spin/my_spin.js"></script>
</body>
</html>dom の参照を jQuery で行いたかったので、jQuery を追加しています
あとは spin.js と独自の JavaScript ファイルを body の直前で読み込んでいます
spin.js を使った JavaScript ファイルの作成
- vim my_spin.js
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
console.log("start");
var target = $("#test_spin").get(0);
var spinner = new Spinner(opts).spin(target);
setTimeout(function() {
spinner.stop();
$("#layer").hide();
console.log("stop");
}, 5000);
$('#stop').click(function () {
console.log("stop");
spinner.stop();
});JavaScript ファイルが読み込まれた瞬間にローティングが始まります
おまけで stop 要素をタップした場合の処理も実装しています
これはなくても動作するので参考まで
動作確認
index.html にアクセスしてみましょう
すると 5 秒後にローティング画面が非表示になりかつ薄青のレイヤー用の div も非表示になります
非表示になったあとに stop をタップすることができるようになります
レイヤ用の div を初めから削除した状態で index.html を開くといきなり stop をタップすることができます
stop をタップするとタップした瞬間ローティング画面が非表示になります
spin.js の挙動としてはローティングを表示する div タグは別にどこにあっても良くその上に強制的にローティング画面を表示します
そして、今回の設定であれば画面中央に表示されます
表示される場所やそれ以外の設定はすべて opts 変数で定義されているので適当に変更しながら挙動を確認すると良いと思います
最後に
spin.js を HTML と JavaScript だけで簡単に試してみました
spin.js 自体はシンプルにローティング画面を表示/非表示するだけなので、ローティング中に他のボタンを表示させないようにレイヤなどを自分で用意する必要はありそうです
それでも簡単にローティング画面を実装できる可能です
0 件のコメント:
コメントを投稿