「LOADING」テキストを使用したCSSローダー27選

@ハクト 2023-07-26 12:13:05に投稿

今回は「LOADING」テキストにアニメーションを入れたローディングアニメーションを紹介します。

「LOADING」テキストを一文字ずつ「span」タグで囲みアニメーションを入れたものや「width」を変化させたアニメーション、「transform」で文字を変形させたローダーなど様々なローディングアニメーションを作りました。

JSを使わず、HTMLとCSSのみで実装しています。

文字が左から順に回転するローディングアニメーション

keyframeで「rotateX」を指定。一文字ずつ「span」タグで囲んで少しずつ「animation-delay」させてます。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.loading-area span {
    display: inline-block;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    animation: rotate 2s infinite linear;
    text-transform: uppercase;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.5s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.6s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.7s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.8s;
}

.loading-area span:nth-child(10) {
    animation-delay: 0.9s;
}

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

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

}

このWEBパーツを確認する 

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

文字が左から徐々に拡大するローディングアニメーション

keyframeで「scale」を指定。一文字ずつ「span」タグで囲んで少しずつ「animation-delay」させてます。

コードを表示

<div class="loading-area">
    <span>L</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.loading-area span {
    display: inline-block;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: rotate 1s infinite linear;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.5s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.6s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.7s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.8s;
}

.loading-area span:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes rotate {
    10% {
        transform: scale(1.1);
    }

}

このWEBパーツを確認する 

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

文字が少し回転するローディングアニメーション

keyframeで「rotateY」を指定し回転させ「text-shadow」で影を入れてます

コードを表示

<div class="loading-area">
    <span>L</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.loading-area span {
    display: inline-block;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: rotateText 3s infinite linear;
}

@keyframes rotateText {
    80% {
        transform: rotateY(45deg);
        text-shadow: -15px 0px 5px #939393;
    }

}

このWEBパーツを確認する 

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

文字の影が左から順に表示されるローディングアニメーション

keyframeで「text-shadow」を指定。「span」タグで囲んで「animation-delay」で少しずつ影を表示させてます。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.loading-area span {
    display: inline-block;
    color: #000;
    font-size: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-weight: bold;
    animation: textShadow 2s infinite linear;
    text-transform: uppercase;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.5s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.6s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.7s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.8s;
}

.loading-area span:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes textShadow {
    60% {
        text-shadow: 0px 20px 0px #999;
    }

}

このWEBパーツを確認する 

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

徐々に拡大するローディングアニメーション

keyframeで「scale」を指定し徐々に拡大させてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: scaleup 2s infinite linear;
    transform: scale(.1);
}

@keyframes scaleup {
    100% {
        transform: scale(1.5);
    }

}

このWEBパーツを確認する 

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

横にストレッチしながら動くローディングアニメーション

keyframeで「scale」「translateX」を指定し徐々に拡大・縮小させながら移動させてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: grid;
    place-items: center;
    width: 400px;
    height: 100%;
    overflow: hidden;
}

.loading-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: moveInOut 2s ease-in-out infinite;
}

@keyframes moveInOut {
    0% {
        transform: scaleX(3) translateX(100%) skewX(45deg);
    }

30%,
60% {
    transform: scaleX(1) translateX(0%);
}

100% {
    transform: scaleX(3) translateX(-200%) skewX(45deg);
}

}

このWEBパーツを確認する 

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

文字が徐々に浮き出るローディングアニメーション

@keyframesで「text-shadow」を指定し、影をつけたテキストが徐々に浮き上がるアニメーション

コードを表示

<div class="loading-area">
    <p>loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area p {
    color: #fff;
    font-size: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    animation: textShadow 6s infinite;
}

@keyframes textShadow {
    0% {
        text-shadow: none;
    }

60% {
    text-shadow: 3px 3px 7px #212121,
        -3px -3px 7px #efefef;
}

}

このWEBパーツを確認する 

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

テキストの一部が回転するローディングアニメーション

SVGを使用して「O」の部分を「rotate」関数で回転させてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">l<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
            <path d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"></path>
        </svg>ading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
}

.loading-text svg {
    display: inline-block;
    font-size: 1.5rem;
    animation: rotate 1s infinite linear;
    transform: rotate(0);
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }

}

このWEBパーツを確認する 

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

フォントの太さを変化させたローディングアニメーション

keyframeで「font-weight:bold;」を指定しフォントの太さを変えてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-text {
    color: #000;
    font-weight: 100;
    font-size: 2rem;
    text-transform: uppercase;
    animation: font-bold 1s infinite linear;
}

@keyframes font-bold {
    60% {
        font-weight: bold;
    }

}

このWEBパーツを確認する 

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

文字が垂直軸を基点に回転するローディングアニメーション

keyframeで「rotateY」を指定し垂直軸を基点に回転させてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    perspective: 100px;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: rotate 3s infinite linear;
}

@keyframes rotate {

    70% {
        transform: rotate(0deg);
    }

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

}

このWEBパーツを確認する 

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

下から文字が浮かび上がるローディングアニメーション

keyframeで「translateY」を指定し下から徐々に浮かび上がるようにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    overflow: hidden;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: bottomup 2s infinite linear;
}

@keyframes bottomup {
    0% {
        transform: translateY(100%);
    }

50% {
    transform: translateY(-5px);
}

55% {
    transform: translateY(0);
}

60% {
    transform: translateY(-2px);
}

65% {
    transform: translateY(0);
}

}

このWEBパーツを確認する 

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

左から文字が黒塗りされるローディングアニメーション

「-webkit-text-stroke」で文字を縁取り、before疑似要素で文字の幅を徐々に広げるアニメーションを入れてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-text {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px black;
}

.loading-text::before {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 0;
    color: black;
    animation: textSlide 2s infinite linear;
    content: "loading...";
}

@keyframes textSlide {
    0% {
        -webkit-text-stroke: 1px black;
        width: 0;
    }

70%,
100% {
    width: 100%;
    -webkit-text-stroke: 0px black;
}

}

このWEBパーツを確認する 

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

ズームアウトするローディングアニメーション

keyframeで「scale」を指定し徐々にズームアウトするようにしています

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: grid;
    place-items: center;
    width: 60%;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Me;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: scale(1.5);
    animation: zoomout 1.3s infinite linear;
}

@keyframes zoomout {
    50% {
        transform: scale(.95);
    }

60% {
    transform: scale(1.05);
}

70%,
100% {
    transform: scale(1);
}

}

このWEBパーツを確認する 

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

上から文字がスライドするローディングアニメーション

keyframeで「translateY」を指定し上から文字がスライドするアニメーションにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    overflow: hidden;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: slide 2s infinite linear;
}

@keyframes slide {
    0% {
        transform: translateY(-200%);
    }

30% {
    transform: translateY(5px);
}

35% {
    transform: translateY(0);
}

40% {
    transform: translateY(2px);
}

45% {
    transform: translateY(0);
}

}

このWEBパーツを確認する 

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

円形要素を回転させ文字が現れるローディングアニメーション

keyframeで「rotateY」を指定しbefore疑似要素で生成した円形要素を回転させてます。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 15px
}

.loading-area span {
    position: relative;
    display: block;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 30px;
    height: 30px;
    text-align: center;
}

.loading-area span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: black;
    content: '';
    filter: blur(5px);
    animation: rotate 4s infinite linear;
}

@keyframes rotate {

    70%,
    100% {
        transform: translate(-50%, -50%) rotateY(90deg);
    }

}

このWEBパーツを確認する 

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

「text-shadow」で文字をずらしたローディングアニメーション

keyframeで「text-shadow」を指定し文字が下にずれるアニメーションにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: textShadow 2s infinite linear;
}

@keyframes textShadow {
    0% {
        text-shadow: 0 0 0;
    }

50% {
    text-shadow: 5px 5px 0 #999, 5px 5px 0 #999;
}

100% {
    text-shadow: 5px 5px 0 #cdcdcd, 10px 10px 0 #efefef;
}

}

このWEBパーツを確認する 

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

伸び縮みするローディングアニメーション

keyframeで「scaleX」「scaleY」を指定し文字が伸び縮みするアニメーションにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {}

.loading-text {
    color: #000;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: textShadow 2s infinite linear;
    transform: scaleX(1);
}

@keyframes textShadow {
    50% {
        transform: scaleX(2) scaleY(.9);
    }

60% {
    transform: scaleX(0.8);
}

65% {
    transform: scaleX(1.2);
}

75% {
    transform: scaleX(0.9);
}

80% {
    transform: scaleX(1.1);
}

85%,
100% {
    transform: scaleX(1);
}

}

このWEBパーツを確認する 

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

文字を一文字ずつ傾斜させたローディングアニメーション

skew関数で傾斜させた文字をkeyframeで戻したアニメーション。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
}

.loading-area span {
    position: relative;
    display: block;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    transform: skew(40deg, 60deg);
    animation: skewText 2s infinite linear;
}

@keyframes skewText {

    70%,
    100% {
        transform: skew(0deg, 0deg);
    }

}

このWEBパーツを確認する 

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

傾斜させた文字が回転するローディングアニメーション

skew関数で傾斜させた文字をkeyframeで戻しアニメーションにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    perspective: 120px;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: skew(90deg, 90deg);
    animation: skewText 2s infinite linear;
}

@keyframes skewText {

    70%,
    100% {
        transform: skew(0deg, 0deg);
    }

}

このWEBパーツを確認する 

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

傾斜させた文字が回転するローディングアニメーション

skew関数で傾斜させた文字をkeyframeで戻しアニメーションにしています。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    perspective: 120px;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: skew(90deg, 20deg);
    animation: skewText 2s infinite linear;
}

@keyframes skewText {

    70%,
    100% {
        transform: skew(0deg, 0deg);
    }

}

このWEBパーツを確認する 

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

上から文字が黒塗りされるローディングアニメーション

「-webkit-text-stroke」で文字を縁取り、before疑似要素で文字の高さを徐々に広げるアニメーションを入れてます。

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-text {
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px black;
}

.loading-text::before {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    color: black;
    animation: textSlide 2s infinite linear;
    content: "loading...";
}

@keyframes textSlide {
    0% {
        -webkit-text-stroke: 1px black;
        height: 0;
    }

70%,
100% {
    height: 100%;
    -webkit-text-stroke: 0px black;
}

}

このWEBパーツを確認する 

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

左からグラデーションで塗られるローディングアニメーション

before疑似要素で「-webkit-background-clip: text」を指定しグラデーションカラーをテキストに反映

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #121212;
    overflow: hidden;
}

.loading-text {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #545454;
    text-transform: uppercase;
}

.loading-text::before {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 0%;
    color: transparent;
    background-image: linear-gradient(90deg, #36daf7 10%, #cbf736 90%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: textSlide 2s infinite linear;
    content: "loading...";
}

@keyframes textSlide {

    70%,
    100% {
        width: 100%;
    }

}

このWEBパーツを確認する 

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

縦方向に縮むローディングアニメーション

keyframeで「scaleY」を指定し徐々に縮小するようにしています

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: grid;
    place-items: center;
    width: 60%;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: scaleY(1.5);
    animation: zoomout 1.3s infinite linear;
}

@keyframes zoomout {
    50% {
        transform: scaleY(.95);
    }

60% {
    transform: scaleY(1.05);
}

70%,
100% {
    transform: scaleY(1);
}

}

このWEBパーツを確認する 

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

横方向に縮小するローディングアニメーション

Keyframesで「scaleX」を指定し徐々にズームアウトするようにしています

コードを表示

<div class="loading-area">
    <p class="loading-text">loading...</p>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: grid;
    place-items: center;
    width: 60%;
}

.loading-text {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: scaleX(1.5);
    animation: zoomout 1.3s infinite linear;
}

@keyframes zoomout {
    50% {
        transform: scaleX(.95);
    }

60% {
    transform: scaleX(1.05);
}

70%,
100% {
    transform: scaleX(1);
}

}

このWEBパーツを確認する 

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

水を注いだようなローディングアニメーション

「-webkit-background-clip: text;」で文字に背景色を設定。「background-size」をアニメーションに指定し高さを変化させて水を注いでいるようにしています。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.loading-area span {
    display: inline-block;
    background-color: #efefef;
    background-image: linear-gradient(#37bcf8 0 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 100% 0%;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-size: 2rem;
    font-weight: bold;
    animation: water-anime 2s infinite linear;
    text-transform: uppercase;
}

.loading-area span:nth-child(1) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.14s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.18s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.22s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.26s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.34s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.38s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(10) {
    animation-delay: 0.44s;
}

@keyframes water-anime {

    70%,
    100% {
        background-size: 100% 100%;
    }

}

このWEBパーツを確認する 

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

波のようなローディングアニメーション

「-webkit-background-clip: text;」で文字に背景色を設定。「background-size」をアニメーションに指定し高さを変化させて波のようにしています。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.loading-area span {
    display: inline-block;
    background-color: #efefef;
    background-image: linear-gradient(#17bcf8, #67bcf8);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 100% 2%;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 2rem;
    font-weight: bold;
    animation: water-anime 2s infinite linear;
    text-transform: uppercase;
}

.loading-area span:nth-child(1) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.5s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.6s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.7s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.8s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.9s;
}

.loading-area span:nth-child(10) {
    animation-delay: 1s;
}

@keyframes water-anime {

    50%,
    70% {
        background-size: 100% 100%;
    }

}

このWEBパーツを確認する 

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

波のようなローディングアニメーション

「-webkit-background-clip: text;」で文字に背景色を設定。「background-size」をアニメーションに指定し高さを変化させて波のようにしています。

コードを表示

<div class="loading-area">
    <span>l</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.loading-area {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.loading-area span {
    display: inline-block;
    background-color: #efefef;
    background-image: linear-gradient(#37bcf8, #3989b2);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 100% 20%;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-size: 2rem;
    font-weight: bold;
    animation: wave-anime 1.5s infinite linear;
    text-transform: uppercase;
}

.loading-area span:nth-child(1) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(3) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(4) {
    animation-delay: 0.4s;
}

.loading-area span:nth-child(5) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(6) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(7) {
    animation-delay: 0.1s;
}

.loading-area span:nth-child(8) {
    animation-delay: 0.2s;
}

.loading-area span:nth-child(9) {
    animation-delay: 0.3s;
}

.loading-area span:nth-child(10) {
    animation-delay: 0.4s;
}

@keyframes wave-anime {

    50% {
        background-size: 100% 90%;
    }

}

このWEBパーツを確認する 

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

PR

フリーランスエンジニアに安心保証
在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
css テキストアニメーション ローダー
B!

@ハクト

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

Twitter