ローディングマークの作り方

Question

問題9：ローディングマークの作り方

今回はよく見かけるローディングマークをjqueryを使って作ってみましょう！
ローディングマークの半径は50px、ローディングの要素は20個で作っています（ここは自由に決めてもらっていいです）。

あらかじめエディタに書くコード

                <div class="box"></div>
¥HTML¥

                .box{
  position: relative;
  width: 300px;
  height: 300px;
}
.box span{
  position: absolute;
  top: 50px;
  left: 100px;
  width: 5px;
  height: 15px;
  border-radius: 5px;
  background-color: black;
}
¥CSS¥

Answer 1

解答ソースコード

              $(function () {
  var num=20;
  for(var i=0;i<num;i++){ 
    $(".box").append("<span></span>");
    var angle=Math.PI*(2/num)*i,
          rotateAngle=360*i/num,
          moveX=50*Math.sin(angle)+"px",
          moveY=50*(1-Math.cos(angle))+"px",
          move="translate("+moveX+","+moveY+") "+" rotate("+rotateAngle+"deg)";
    $(".box span").eq(i).css({
      "transform":move,
    });
  }
});
¥JavaScript¥

ローディングマークの作り方

問題9：ローディングマークの作り方

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説