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

簡単なローダー(lorder)のつくりかた1

コメントを残す

ローダー(lorder)とは？

読込中に表示するものです。

HTMLの記述

<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">
 <link rel="stylesheet"href="loader.css">
</head>
<body> 
  <div class="three-dot-spinner"> 
  <div class="bounce1"></div> 
  <div class="bounce2"></div> 
  <div class="bounce3"></div>
 </div>
 </body>
</html>

SCSSの設定

.three-dot-spinner {
  text-align: center;
// ローダーの設定
  &div {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #904669;
// 丸くする
    border-radius: 50%;
// アニメーションの設定1.4秒かけて無限に繰り返す
    animation: sk-bouncedelay 1.4s infinite;
 }
// 一番左の●の設定で他よりも早くアニメーションされる
  &.bounce1 {
    animation-delay: -0.32s;
 }
  &.bounce2 {
    animation-delay: -0.16s;
 }
}
// ここにアニメーションの定義をする
@keyframes sk-bouncedelay {
 0% {
// 収縮させる(大きさが0％)
  transform: scale(0);
 }
// 拡大させる(大きさが100％)
 40% {
  transform: scale(1);
 }
 80% {
  transform: scale(0);
 }
 100% {
  transform: scale(0);
 }
}