シンプルなローダをCSSと

24499 ワード
tutorial html webdev css テキストリンク
あなたのウェブサイトが完全にロードされていないときに良いことは少しアニメーションを再生することです.
それはユーザーが知っていることができます
「それが2秒以上かかるならば、我々は永遠に去るでしょう」
「私のliege、我々は優雅にあなたを提供します.」
マントラのようなアニメーション行為.キャンプファイアに凝視するように.それはあなたの脳は、赤ちゃんを押すキーを押すヒット.何か原始的なものが内部に開き、私たちは時間の外の場所に運ばれます.そして、我々がそこにいる間、誰も負荷に気がつきません..

チュートリアル


このブログでは、ウェブ上で見た様々なローダーを再現してみました.そうすることで、私はそれらを簡単にできるようにしようとするので、彼らは簡単にプロジェクトにインポートすることができますまたはあなた自身を作成するためにアイデアを使用することができます.

The code on Github


予備ジャンク


HTMLファイルであるファイル構造を設定します.index.html とCSSファイルindex.css . HTMLは次のようになります.
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>loaders</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div id="example-1" class="loader"></div>

    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>

    <div id="example-3" class="loader"></div>

    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>
  </body>
</html>
それぞれの例を詳細に説明します.
私はいくつかのCSS変数をCoolors.co ), flexbox , and margin デモの一般的なレイアウトのs.
:root {
    --main-bg-color: #1A535C;
    --loader-bg-color: #FF6B6B;
    --loader-acc-color: #4ECDC4;
}

body{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--main-bg-color);
}

.loader{
    margin-top: 5em;
}

例1



例1 HTMLの1つのdivを設定します.
    <div id="example-1" class="loader"></div>
デザイン:同じサイズを与えるwidth and height とborder-radius: 50%; . 加えることによってborder , これは円を作ることがわかります.
私のスタイルborder-top-color アクセント色で.var(--loader-acc-color) . これはborder 境界のちょうどトップのために.
私はセットアップしました@keyframes example-one したがって、このアニメーションを持つ要素は0から360度に回転します.
私は与える#example-1 エレメントアンanimation プロパティ.速記を使用して、2s , 反復回数infinite , と名前example-one .
/* EXAMPLE 1 */
#example-1{
    width: 3em;
    height: 3em;

    border-radius: 50%;
    border: 0.75em solid var(--loader-bg-color);
    border-top-color: var(--loader-acc-color); /* overrides top color to stand out */

    animation: 2s infinite example-one;
}

@keyframes example-one{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

例2



例えば、HTMLはもう3つのdivのためのdivコンテナです.それぞれが“bar”になります.
    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>
デザイン#example-2 が与えられるwidth , height and flexbox プロパティバーの中にバー.
各バーにはmargin , width , と起動height . 私はそれらを与えるbackground-color そして、若干の空想border アクセントのもの.
アニメーション:4つの部分がexample-two アニメーション、0 %、25 %、50 %、100 %に分割.
0 %でheight が2.5em , 各バーの最初の高さと同じです.0 %から25 %までheight 成長する5em . 25 %から50 %まで、それは50 %まで縮小します2.5em それはアニメーションが再起動するときに100 %まで維持されます.
私はそれぞれのバーを与えるanimation 期間のプロパティ1.5s , 反復回数infinite , そして、@keyframes 名前で.example-two .
最後に、遊びをやわらげるために、彼らのIDによって個々のバーをつかむ.bar-1 遅延を得る0.25s and bar-2 遅延を得る0.5s .
/* EXAMPLE 2 */
#example-2{
    width: 5em;
    height: 5em;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bar{
    margin: 0.2em;
    width: 0.75em;
    height: 2.5em;

    border: 0.1em solid var(--loader-bg-color);
    border-left: 0.1em solid var(--loader-acc-color);
    background-color: var(--loader-bg-color);

    animation: 1.5s infinite example-two;
}

#bar-2{animation-delay: 0.25s}
#bar-3{animation-delay: 0.5s}

@keyframes example-two{
    0% {height: 2.5em}
    25% {height: 5em}
    50% {height: 2.5em}
    100% {height: 2.5em}
}

例3



例3は1つの部門です
    <div id="example-3" class="loader"></div>
私のデザイン#example-3 エーwidth: 5em; and height: 1em; 長い矩形にする.私はそれを与えるbackground-color そして、若干の空想border アクセントのもの.
アニメーション:私はtransform 再度プロパティを返しますが、今回はY軸上で0から180度までdivを反転しますrotateY() . その後、私は360度、その開始位置に戻ってそれを反転させます.
/* EXAMPLE 3 */
#example-3{
    width: 5em;
    height: 1em;

    border: 0.3em solid var(--loader-bg-color);
    border-right: 0.3em solid var(--loader-acc-color);    
    background-color: var(--loader-bg-color);

    animation: 3s infinite example-three;
}

@keyframes example-three{
    from { transform: rotateY(0deg);}
    50% { transform: rotateY(180deg);}
    to { transform: rotateY(360deg);}
}

例4



例4、最も複雑なローダは、3つの子divsを持つコンテナdivのHTMLを持っています.各々の子供は、ボールのように形づくられる一つのdivのための容器divでもあります.
    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>
デザイン:外側の大部分の容器.#example-4 含むflexbox センターのローダのプロパティ.
それぞれ.ball-container 同じwidth ASheight それを正方形とAにするためにmargin-right 間にスペースを置く.
Then, .ball-container ゲットflexbox 中心に“ボール”のプロパティ.ボールが変化するので、それは重要です.
それぞれ.ball 初期値を取得するwidth and height 0から始まる.エーborder-radius 50 %が円になりますbackground-color それらを見えるようにします.
アニメーション:アニメーションは、同じロジックに従いますexample-2 私は各ボールの操作を除いてheight and width .
0 %から20 %まで、彼らは成長します0 X0 to 1.5em X1.5em . 私は、このサイズで20 %から40 %まで彼らを保ちます.40 %から90 %に縮小する0 X0 , そして、90 %から100 %までそこに残ります.
私はそれぞれのボールを設定して、アニメーションのプロパティを持つ1.2s , 反復回数infinite , と名前example-four .
最後に、個々のIDでそれぞれのボールをつかむのでanimation-delay to #ball-2 and #ball-3 . これはアニメーションを驚かせます.
/* EXAMPLE 4 */
#example-4{
    display: flex;
    align-items: center;
    justify-content:center;
}

.ball-container{
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.8em;

    display: flex;
    align-items: center;
    justify-content:center;
}

.ball {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--loader-bg-color);

    animation: 1.2s infinite example-four;
}

#ball-2{animation-delay: 0.1s;}
#ball-3{animation-delay: 0.2s;}

@keyframes example-four{
    0%  {
        width: 0;
        height: 0;
    }
    20% {
        width: 1.5em;
        height: 1.5em;
    }
    40%{
        width: 1.5em;
        height: 1.5em;
    }
    90%{ 
        width: 0;
        height: 0;
    }
    100%{ 
        width: 0;
        height: 0;
    }
}

結論


ブログを読んでくれてありがとう.私は、あなたがそれのいくつかが役に立つとわかることを望みます.
最低でも、私のローダーの一人が、その時を超越した場所にあなたを運んでくれることを願っています.ほんのちょっとの間、あなたは宇宙のバランスを感じ、ニルヴァーナのスライス、内側の平和を味わいました.ベスト,ジェイソン.
プログラマー2021 Dev-Martching:Webバックエンド開発者(上半期)>楽透の最高と最低順位
[BOJ]15488夜に碁盤が出ない確率