読み込み中のアニメーションをCSSを使って実装する方法

Webサイト作成していると、ローディングの際の読み込みにアニメーションをつけたくなるときありますよね。コンテンツをAjaxなどで読み込む際には、ユーザーに対して読み込み中であることを明示しないと、ユーザーは不安になってしまいます。

アニメーションをつける方法として、gif画像を表示する方法や、javascriptを用いて実装する方法、cssアニメーションを使って実装する方法があります。

今回はその中でcssを使って実装する方法をご紹介します。

cssを使ってローディングアニメーションを実装する

こんな感じで読み込み中のアニメーションを実装することができます。htmlの要素はdiv一つのみなので、jsなどでコンテンツを追加する要素に対してアニメーションをつけることができます

サンプルコード

実際に上記のアニメーションのソースコードを紹介します。

// css
.loading {
    position: relative;
    height: 150px;
}
.loading:before {
    content: '読み込み中';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 40px);
}
.loading:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 50px;
    height: 50px;
    border: 5px solid #000;
    border-right: 5px solid transparent;
    border-radius: 50%;
    animation: loading 2s linear infinite;
}
@keyframes loading {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .9;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        opacity: .3;
    }
}

// HTML
<div class="loading"></div>

上記のソースをコピーしてもらえれば動作するかと思います。

このソースコードで重要になってくるところが、ここになります

border: 5px solid #000;
border-right: 5px solid transparent;
border-radius: 50%;

ローディングアニメーションを非表示にする

このローディングのアニメーションですが、ずっとくるくるさせたままにする人はいないと思います。

コンテンツの読み込みが完了した時点で表示にする必要が出てきます。そこはjsを一部用いて実装していきます。

cssに以下のコードを追記します。

// css
.loading.is-loaded:before,
.loading.is-loaded:after {
    display: none;
}

jsでは、コンテンツが読み込み完了したタイミングでis-loadedというクラスを付与します。これで非表示になります。今回の例では、ボタンを押した後、3秒後にis-loadedのクラスが付与される実装にしました。

最後に完成したソースコード

CSS

.loading {
    position: relative;
    height: 150px;
}
.loading:before {
    content: '読み込み中';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 40px);
}
.loading:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 50px;
    height: 50px;
    border: 5px solid #000;
    border-right: 5px solid transparent;
    border-radius: 50%;
    animation: loading 2s linear infinite;
}
.loading.is-loaded:before,
.loading.is-loaded:after {
    display: none;
}
@keyframes loading {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .9;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        opacity: .3;
    }
}
// ボタンのデザインなのでここは不要
.loaded-button {
    border-radius: 3px;
    border: 1px solid #dfdfdf;
    padding: 5px 20px;
    background: #e0e0e0;
}

HTML

<div class="loading"></div>
<button class="loaded-button">読み込み完了</button>

JavaScript

// JavaScript
// ここでis-loadedのクラスを付与する
$('.loaded-button').click(function() {
    setTimeout(function() {
        $('.loading').addClass('is-loaded');
        $('.loading').html('読み込み完了')
    }, 3000); 
});