Help us understand the problem. What is going on with this article?

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

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

loading.jpg

animationの設定

書き方とそれぞれのメモ。

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
<body>
  <img class="loading" src="../loading/assets/img/tyopress.svg" alt="loading">
</body>
css
.loading {
  animation: loading 1s linear infinite;
}

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

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

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

css
@keyframes loading {
  0% {
  }

  50% {
    margin-top: 100px;
  }

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

全部cssで書いてみる

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

html
<div class="loading"></div>
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
@keyframes loading {
  0% {
  }

  50% {
    opacity: .6;
  }

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

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

jQueryでページに埋め込む

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

jQueryの基本、おさらい

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

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

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

loadingの表示、非表示

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

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

  <div class="content"></div>
</body>
jQuery
$(window).on('load',function(){
  $('.loading').fadeOut('fast'); // 画像が全て読み込まれたら.loadingを非表示
  $('.content').fadeIn('slow'); // 画像が全て読み込まれたら.contentを表示
});

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

css
.content {
  display: none; /* あらかじめ.contentを非表示にしておく */
}
jQuery
$(window).on('load',function(){
  var loading = function(){
    $('.loading').fadeOut('fast');
    $('.content').fadeIn('slow');
  };
  setTimeout(loading,3000); // setTimeoutを使って表示時間を設定する
});

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

See the Pen JLrJgR by kayukihashimoto (@kfunnytokyo) on CodePen.

おわり。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away