ローディングのアニメーションの作り方

くるくる回るアニメーション

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

HTML の 子要素に JQuery で span を追加して CSS animation で動かします

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
</head>
<body>

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


</body>
</html>

CSS

.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;
  opacity: .3;
  animation: loading infinite;
}
@keyframes loading{
  0%{opacity: 0.3;}
  30%{opacity: 1;}
  60%{opacity: 0.3;}
}

JQuery

$(function(){
  let num = 20;
  for(let i=0; i<num; i++){
    $(".box").append("<span></span>");
    let 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,
    });
    for(let i=0; i<num; i++){
      $(".box span").eq(i).css({
        "animation-duration":num/20+"s",
        "animation-delay":i/20+"s"
      });
    }
  }
});

解説

CSS

  • .box に position: relative; と width + height で animation を動かす枠を作ります
  • .box span で span に CSS を当て、ドットを作成
  • @keyframes で ドットが濃くなる CSS animation を設定

JQuery

  • let num = ドットの個数を入力
  • for を使い num で設定したドットの個数分の処理を繰り返す
  • $(“.box”).append(“<span></span>”); = .box の直下に span を作ります
  • let で変数を作ります。5行あります。詳細は下記参照。
  • .box span の中から .eq( i ) i番目の要素に .css({ transform: 変数move;}) を付与する
  • for でループを行う、animation-duration(何秒かけてアニメーションを行うか)、animation-delay(アニメーションの開始までを遅延させる)の CSS を、全てのドットに少しずつずれるように付与する

変数解説

  • angle = ドットが綺麗に円になるようにする値
  • rotateAngle = ドットを傾ける値
  • moveX , moveY = ドットの配置をX方向とY方向で指定する値、angle の値を使用
  • move = CSS として .box span に付与する値。translate に moveX と moveY を使用。 ratate に ratateAngle を使用。
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。