【コピペOK！CSSだけで作る】ローディングアイコンの作り方

本日は


【CSSだけで作る】ローディングアイコンの作り方


という記事です。

ローディングアイコンはWEBサイトを運営されている方やサイトを作ったことがある人なら見た事がある、もしくは作ってみたいと思った事があるのではないでしょうか。

この記事では実際のサンプルと、それに伴HTML/CSSの解説を致します。

この記事を書いている人

サンプル

それでは早速サンプルから見ていきましょう。

以下のcodepenの「Result」ボタンを押して下さい。

See the Pen xxqGYPR by shino (@rytym0720) on CodePen.

今回はこちらの左から右に流れるようなローディングアイコンを作っていこうと思います。

では実際にHTMLとCSSの解説です。

HTML

HTMLはシンプルです。

three-spinnerというdivの中に、実際のアイコンとなるdot1,dot2,dot3というdivを作りました。

実際にここにCSSを適用させていきます。

<div class="three-spinner">
    <div class="dot1"></div>
    <div class="dot2"></div>
    <div class="dot3"></div>
  </div> 

CSS

//①
.three-spinner{
  text-align: center;
}

//②
.three-spinner div{
width: 18px;
height: 18px;
display: inline-block;
background-color: #000;
border-radius: 50%;
animation:sk-dotdelay 1.4s infinite;
}

//③
.three-spinner .dot1{
  animation-delay: -0.32s;
}

.three-spinner .dot2{
  animation-delay: -0.16s;
}

④
//※<a href="http://www.twitter.com/keyframes" target="_blank">の部分は削除してご利用ください。
@keyframes sk-dotdelay{
  0%{
    transform: scale(0);
  }
  40%{
    transform: scale(1);
  }
  80%{
    transform: scale(0);
  }
  100%{
    transform: scale(0);
  }
}

①

ローディングアイコンを中央揃えにしています。表示させたい場所によっては必要ありません。

②

ローディングアイコン自体のデザインをここで作っています。

animation:sk-dotdelay 1.4s infinite;は1.4秒ごとに決められたアニメーションを無制限に行うよ、という意味です。infiniteは英語で無限という意味ですが、ここでも同じように使われます。

sk-dotdelayというアニメーション名は後ほど定義するものになります。

③

3つあるうちの1つめのアイコンにanimation-delay: -0.32s;をかけていますが、これはアニメーションする時間を0.32秒遅らせて開始するよ、という意味です。

同じくその下は2つ目のアイコンのアニメーションを0.16秒遅らせて開始してね、という意味になります。

④

keyframes sk-dotdelayという形でアニメーションを定義しています。

keyframesは

0%{
    transform: scale(0);
  }
  40%{
    transform: scale(1);
  }
  80%{
    transform: scale(0);
  }
  100%{
    transform: scale(0);
  }

このように0%から100%の間で変化の値を定義してアニメーションを作る事ができます。

使いこなすとかなり幅広いアニメーションが作れるようになりますよ。

ここではtransform:scale()の中で値を設定していますが、scaleは要素を拡大or縮小する際に使用する事が出来ます。

この場合、40%の時のみ「1」となっており、それ以外は「0」、つまりは非表示になっています。

そのため、0%の時は非表示、40%な時は表示、80%と100%のときは非表示となっており、1.4秒という時間の中で表示と非表示を繰り返している、というわけです。

と思われたかもしれませんが、0%と100%の間に数値が多く入っている方がスムーズな動きになるのです。

是非試しに色んな数値を入れたり消したりして動きの変化を楽しんでもらえたらと思います。

それではまた次の記事でお会いしましょう。