Loading画面をCSSのAnimationを作って実装する【HTML＆CSS】

HTML&CSS

2024.03.31

　こんにちは。かじです。

　今回は、LoadingUIを作るチュートリアルを解説して、CSSのAnimationを解説していきたいと思います。

　今回作成する成果物は下記のようになります。

Loading

1.基本的なレイアウトを作る
2.一つ目の点の動きをつける
3.二つ目三つ目の点の動きをつける
4.四つ目の点のアニメーションをつける
1. 関連

1.基本的なレイアウトを作る

　まずは、基本的なレイアウトを作成していきます。

　特筆することは多くはありませんが、点を表す<div class=”dot”>について。

　一つ目の点は、最初見えない状態から、アニメーションの開始と共に大きくなることで現れるので、transform:scale(0);で最初は見えない状態にしておきます。

　二つ目の点は、一番左端に位置しているためleft:0;、四つ目の点は一番右に位置しているため、right:0;で位置関係を作っておきます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Loading</h1>
        <div class="main">
            <div class="dot one"></div>
            <div class="dot two"></div>
            <div class="dot three"></div>
            <div class="content">
                <div class="dot four"></div>
            </div> 
        </div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

:root{
    --crl-white:#eee;
    --crl-black:#222;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family:Roboto;
    background-color: var(--crl-black);
    overflow: hidden;
}

.container{
    display:flex;
    align-items: flex-end;
    font-size:4em;
}

h1{
    font-size: inherit;
    color: var(--crl-white);
}

.main{
    position: relative;
    display: flex;
    justify-content: space-around;
    width: calc(.2em * 5);
    margin-left: .1em;
    bottom: .4em;
}

/* ①ここまで */
.dot{
    position: absolute;
    width: .2em;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--crl-white);
}

.dot.one{
    left: 0;
    transform: scale(0);
}

.dot.two{
    left: 0;
}

.content{
    position: absolute;
    right: 0;
}


.dot.four{
    right: 0;
}
/* ①ここまで */

Loading

2.一つ目の点の動きをつける

　基本的なレイアウトができたら、次は一つ目の点のアニメーションを付けます。

　下のコードを追加します。

.dot.one{
    left: 0;
    transform: scale(0);
    animation: growing 3s infinite;　/* 追加 */
}
/* 追加ここから */
@keyframes growing {
    0%,5%{
        transform: scale(0);
    }
    20%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
    }
}
/* 追加ここまで */

　animationプロパティを追加し、名前、アニメーションの長さ、繰り返しについての値を追加します。

　ここでは、名前について解説します。名前では、下のkeyframesプロパティで、アニメーションの名前とそのアニメーションはアニメーションの途中でどういう変化をするのかを定義することができます。

　アニメーションgrowingでは、3秒のうち、0%、5%の時は(scale(0)のため)非表示で20%で点が姿を表します。このような設定を行うことで、動きの詳細を定義することができます。

　下のサンプルでは、動きをわかりやすくするために二つ目の点(.dot.two)を非表示にしています。

Loading

3.二つ目三つ目の点の動きをつける

　次は二つ目、三つ目の点のアニメーションを付けます。

　こちらも一つ目の点と同様animationプロパティを追加し、名前、アニメーションの長さ、繰り返しの回数を定義します。

　goRightではX方向に動くアニメーションを定義しています。

.dot.two{
    left: 0;
    animation: goRight 3s infinite; /* 追加 */
}
.dot.three{
    animation: goRight 3s infinite; /* 追加 */
}

/* 追加ここから */
@keyframes goRight {
    20%{
        transform: translateX(.4em);
    }
    100%{
        transform: translateX(.4em);
    }
}
/* 追加ここまで */

Loading

4.四つ目の点のアニメーションをつける

　最後に四つ目の点のアニメーションを付けていきたいと思います。

　下記のコードを追加します。

.content{
    position: absolute;
    right: 0;
    animation: fallingY 3s cubic-bezier(0.4,0.04,0.75,0.52) infinite; /* 追加 */
}

/* 追加ここから */
@keyframes fallingY {
    5%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(8em);
    }
}
/* 追加ここまで */

.dot.four{
    right: 0;
    animation: fallingX linear 3s infinite; /* 追加 */
}

/* 追加ここから */
@keyframes fallingX {
    5%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(3em);
    }
}
/* 追加ここまで */

　四つ目の点については右に若干移動しながら、落ちていくアニメーションになります。それを表現するために、四つ目とそれを囲むdivにそれぞれ縦に移動するアニメーションと横に移動するアニメーションを追加していきます。