日別アーカイブ: 2021年8月13日

簡単なローダー(lorder)のつくりかた1.5(リファクタリング)

コメントを残す

リファクタリングしてコード量を減らす

HTMLの記述

<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
 <link rel="stylesheet"href="loader.css">
</head> 
<body>
  <div class="three-dot-spinner">
 <div></div>
 <div></div>
 <div></div>
</div>
</body>

SCSSの記述

.three-dot-spinner {
   text-align: center;
 & div {
   display: inline-block;
   width: 18px;
   height: 18px;
   background-color: #904669;
   border-radius: 50%;
   animation: sk-bouncedelay 1.4s infinite;
   // 1から99までループしたいとき //
   @for $i from 1 to 100
   // 1から2までループしたいとき
   @for $i from 1 through 2 {
   &:nth-child(#{$i}) {
     animation-delay: -0.32s / $i;
  }
  }
  } 
 }
 @keyframes sk-bouncedelay {
 0% {
 transform: scale(0);
 }
 40% {
 transform: scale(1);
 } 80% {
 transform: scale(0);
 } 100% {
 transform: scale(0);
 }
}

※ポイント

@for $i from 1 through 2 {
 &:nth-child(#{$i}) {
 animation-delay: -0.32s / $i;

こうすることで2秒後-0.16s、3秒後-0.1sと設定できる(今回は2秒までです。)