四角い枠が変化・分離するローディングアニメーションまとめ

@ハクト 2023-07-27 11:38:59に投稿

四角形の要素が回転したり4つの円に分離したりするローディングアニメーションをCSSで作りました。

主に「border」や「transform」プロパティを使用し要素を変化させています。

簡単な指定で目を引くローダーが作れるので、以下を参考に色々試してみてください。

四角枠が円形に変化するローダー

keyframesで「transform:scale」「border-radius:50%;」を指定し円形に変化させてます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 50px;
    height: 50px;
    background-color: #333;
    animation: loadingAnime 2s infinite ease-in-out;
}

@keyframes loadingAnime {
    50% {
        transform: scale(.7);
        border-radius: 50%;
    }

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

四角枠が回転するローダー

keyframesで「transform:rotate」を指定し回転させてます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 50px;
    height: 50px;
    background-color: #333;
    animation: loadingAnime 0.5s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {
    50% {
        transform: translateY(10px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 10px;
    }

100% {
    transform: rotate(180deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

四角枠から円形に変形して回転するローダー

keyframesで「transform:rotate」「border-radius:50%;」を指定し回転させながら円形にしてます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 50px;
    height: 50px;
    background-color: #333;
    animation: loadingAnime 1.5s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    30%,
    50% {
        transform: rotate(90deg);
        border-radius: 50%;
    }

80%,
100% {
    transform: rotate(180deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

borderプロパティを使用！拡大し四つ角に分かれるローダー

要素の幅高さを0にして、borderプロパティに「dotted」を指定。keyframesで要素の幅高さを変更してます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 0px;
    height: 0px;
    border: 10px dashed;
    background-color: #fff;
    animation: loadingAnime 2s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    0%,
    20% {
        width: 0px;
        height: 0px;
    }

60%,
80% {
    width: 40px;
    height: 40px;
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

borderプロパティを使用！中心から白背景が広がるローダー

要素の幅高さを0にして、borderプロパティで四角形を作り、keyframesでborderの幅、要素の幅高さを変更してます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 0px;
    height: 0px;
    border: 25px solid;
    background-color: #fff;
    animation: loadingAnime 1.5s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    80%,
    100% {
        width: 50px;
        height: 50px;
        border: 0px solid;
    }

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

borderプロパティを使用！4つの円形に分離するローダー

要素の幅高さを0にして、borderスタイルを「dotted」に設定。四角形を作り、keyframesで要素の幅高さを変更し回転させてます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 0px;
    height: 0px;
    border: 25px dotted;
    background-color: #fff;
    animation: loadingAnime 1.5s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    0%,
    20% {
        width: 0px;
        height: 0px;
    }

80%,
100% {
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

borderプロパティを使用！4つの枠に分離するローダー

要素の幅高さを0にして、borderスタイルを「dashed」に設定。四角形を作り、keyframesでborder、要素の幅高さを変更し回転させてます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 0px;
    height: 0px;
    border: 25px dashed;
    background-color: #fff;
    animation: loadingAnime 1.5s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    0%,
    20% {
        width: 0px;
        height: 0px;
    }

80%,
100% {
    width: 40px;
    height: 40px;
    border: 15px dashed;
    transform: rotate(90deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

要素が斜めに変形するローダー

keyframesに「skewX」「skewY」を指定し変形させてます

コードを表示

<div class="loading-section">
    <div class="loading-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loading-item {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #353535;
    box-sizing: border-box;
    animation: loadingAnime 1s infinite;
}

@keyframes loadingAnime {
    0% {
        transform: skewX(0);
    }

25% {
    transform: skewX(20deg);
}

50% {
    transform: skewY(0);
}

75% {
    transform: skewY(20deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

境界線の色を変えたローダー

keyframesで「border-color」を一つずつ変化させてます

コードを表示

<div class="loading-section">
    <div class="loading-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loading-item {
    width: 0;
    height: 0;
    border: 25px solid #353535;
    border-top-color: #efefef;
    border-radius: 5px;
    background-color: #353535;
    box-sizing: border-box;
    animation: loadingAnime 3s infinite;
}

@keyframes loadingAnime {

    0% {
        border-color: #353535;
        border-top-color: #efefef;
    }

25% {
    border-color: #353535;
    border-right-color: #efefef;
}

50% {
    border-color: #353535;
    border-bottom-color: #efefef;
}

75% {
    border-color: #353535;
    border-left-color: #efefef;
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

境界線の色を変えたローダー

keyframesで「border-color」を一つずつ変化させてます

コードを表示

<div class="loading-section">
    <div class="loading-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loading-item {
    width: 0px;
    height: 0px;
    border: 25px double #353535;
    border-top-color: #efefef;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    animation: loadingAnime 3s infinite;
}

@keyframes loadingAnime {

    0% {
        border-color: #353535;
        border-top-color: #efefef;
    }

25% {
    border-color: #353535;
    border-right-color: #efefef;
}

50% {
    border-color: #353535;
    border-bottom-color: #efefef;
}

75% {
    border-color: #353535;
    border-left-color: #efefef;
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

四角枠が縦横に回転するローダー

「rotateX」「rotateY」で回転させてます

コードを表示

<div class="loading-section">
    <div class="loading-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loading-item {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #353535;
    box-sizing: border-box;
    animation: spin 3s infinite;
}

@keyframes spin {
    0% {
        transform: rotateX(0deg);
    }

25% {
    transform: rotateX(180deg);
}

50% {
    transform: rotateX(360deg) rotateY(0deg);
}

75% {
    transform: rotateY(180deg);
}

100% {
    transform: rotateY(360deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

borderプロパティを使用！縦横の順に拡大するローダー

要素の幅高さを20pxにして、keyframesで要素の幅高さを変更してます。

コードを表示

<div class="loading-section">
    <div class="loadidng-item"></div>
</div>

 

.loading-section {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}

.loadidng-item {
    width: 20px;
    height: 20px;
    background-color: #000;
    animation: loadingAnime 2s infinite ease-in-out;
    overflow: hidden;
}

@keyframes loadingAnime {

    30%,
    50% {
        width: 20px;
        height: 50px;
    }

70%,
90% {
    width: 50px;
    height: 50px;
}

}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

PR

在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
動画編集入門プラン（2ヶ月）用LP
css ローダー 四角形 アニメーション
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter