内容のロード時の回転動画

2513 ワード

アニメーション

JavaScriptのタイマーとCSS 3の角の長方形を使って、コンテンツをロードする時の回転動画を実現できます.下のコードを見てください.

<!DOCTYPE html>

<html>  

<head>

<title>          </title>

<style type="text/css">

#loaddiv span {

  position: absolute; width: 4px; height: 4px;

  -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;

}

.bullet1 { background:#00F; } .bullet2 { background:#22F; }

.bullet3 { background:#44F; } .bullet4 { background:#66F; }

.bullet5 { background:#88F; } .bullet6 { background:#AAF; }

.bullet7 { background:#CCF; } .bullet8 { background:#EEF; }

</style>

</head>  

<body>

<div id="loaddiv">

<span class="bullet1"></span><span class="bullet2"></span>

<span class="bullet3"></span><span class="bullet4"></span>

<span class="bullet5"></span><span class="bullet6"></span>

<span class="bullet7"></span><span class="bullet8"></span>

</div>

<script type="text/javascript">

window.onload = function() {

  var loader = document.getElementById("loaddiv");

  var bullets = loader.getElementsByTagName("span");

  initShow();

  function initShow() {

    var x, y;

    for (var i = 0; i < 8; i++) {

      x = 8 + 8 * Math.cos(i*Math.PI/4); y = 8 + 8 * Math.sin(i*Math.PI/4);

      bullets[i].style.left = x + "px"; bullets[i].style.top = y + "px";

    }

    loadShow(0);

  }

  function loadShow(idx) {

    var j;

    loader.style.visibility = "hidden";

    for (var i = 0; i < 8; i++) {

      j = (idx <= i)? idx - i + 8 : idx - i;

      bullets[i].className = "bullet" + j;

    }

    loader.style.visibility = "visible";

    idx = (idx === 7) ? 0 : idx + 1;

    setTimeout(loadShow, 400, idx);

  }

};

</script>  

</body>  

</html>

このコードが実行された結果、8つの色がグラデーションと回転し続ける小さな円点(結果を表示)が得られた.もちろん、この場合にはsetTimeoutの代わりにsetIntervalを用いることもできる.また、コードにはCSS 3で丸がいくつか実現されていますので、古いバージョンのブラウザでは使用できません.
参考資料:[1]Javascript Loading Sreen[2]JavaScriptがLoadingアニメーション効果を作る

Ubuntu 16.04取付及び配置nginx