css3で作るloadingアニメーション

css3でloadingアニメーションを作ってみたまとめです。

![loading.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/f30ab09c-7097-d44b-7f80-6192157f103e.jpeg)

#animationの設定
書き方とそれぞれのメモ。

```css:css
.loading {
  animation: animation-name animation-duration animation-timing-function animation-delay animation-delayunt animation-direction;
}

@keyframes 任意の名前 {
  from {
    /* アニメーション開始時のスタイル */
  }
  to {
    /* アニメーション終了時のスタイル */
  }
}
```

```
animation-name: @keyframesで付けた任意の名前

animation-duration: アニメーションの時間

animation-timing-function: 動き方（ease, linear, ease, ease-out, ease-in-out, cubic-bezier）

animation-delay: アニメーションがスタートする時間

animation-delayunt: アニメーションの繰り返し（infinite: 無限に繰り返す、数値: 回数）

animation-direction: 逆再生の設定。defaultはnormal。alternateが逆再生。
```

##画像をcssでアニメーション

まずは画像を使って、cssで動かしてみます。
くるくる回る、あれです。

```html:html
<body>
  <img class="loading" src="../loading/assets/img/tyopress.svg" alt="loading">
</body>
```

```css:css
.loading {
  animation: loading 1s linear infinite;
}

@keyframes loading {
  from {
  }
  to {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}
```

これだけで、簡単にアニメーションが追加出来ました。

fromとtoは%に置き換えて、ポイントを増やすことも出来ます。
例えば、こんな感じ。
くるくる回りながら上下するアニメーションです。

```css:css
@keyframes loading {
  0% {
  }

  50% {
    margin-top: 100px;
  }

  100% {
    margin-top: 0;
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}
```

##全部cssで書いてみる

さらに、画像部分もcssだけで書いてみます。
視力検査のあれがくるくる回ります。

```html:html
<div class="loading"></div>
```

```css:css
.loading {
  width: 50px;
  height: 50px;
  border: 5px solid #000;
  border-right: 5px solid transparent;
  border-radius: 30px;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  to {
  }

  from {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}
```

ポイントを増やして、変化をつけてみます。

```css:css
@keyframes loading {
  0% {
  }

  50% {
    opacity: .6;
  }

  100% {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
    opacity: .3;
  }
}
```

cssだけで書けるから、ちょっとした手直しも気軽に出来るのがいいですね。

#jQueryでページに埋め込む

せっかくなので、loadingとして機能するようにページに埋め込んでみます。
*ここからはjQueryで設定します。

##jQueryの基本、おさらい

```javascript:jQuery
$(window).on('load',function(){
  // DOM,画像の読み込みが全て終わったらする処理
});

$(function(){
  // DOMの読み込みが終わったらする処理
});
```

*jQueryの読み込み、書き方などは省いています。

##loadingの表示、非表示

今回は、DOM,画像の読み込みが全て終わったらloadingを非表示に、
コンテンツ部分を表示するように設定します。

```html:html
<body>
  <div class="loading"></div>

  <div class="content"></div>
</body>
```

```javascript:jQuery
$(window).on('load',function(){
  $('.loading').fadeOut('fast'); // 画像が全て読み込まれたら.loadingを非表示
  $('.content').fadeIn('slow'); // 画像が全て読み込まれたら.contentを表示
});
```

さらに、loadingの時間を任意で設定したい場合。

```css:css
.content {
  display: none; /* あらかじめ.contentを非表示にしておく */
}
```

```javascript:jQuery
$(window).on('load',function(){
  var loading = function(){
    $('.loading').fadeOut('fast');
    $('.content').fadeIn('slow');
  };
  setTimeout(loading,3000); // setTimeoutを使って表示時間を設定する
});
```

これで、任意の時間でloadingの時間を設定できました。

<p data-height="265" data-theme-id="0" data-slug-hash="JLrJgR" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="JLrJgR" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/JLrJgR/">JLrJgR</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

おわり。