肉球のプログレスバーアニメーション

ローディング中の待ち時間は、ユーザーにとってストレスになりがちです。しかし、かわいらしい演出を加えることで、待ち時間を楽しい体験に変えることができます。

このパーツでは、肉球の足跡が左右交互に現れるプログレスバーを作成します。立体感のあるdrop-shadowと、歩くような配置で、ユーザーの気持ちを和ませながら進行状況を伝えます。猫好きなユーザーには特に好評な、遊び心あふれるデザインです。

作成した肉球のプログレスバーアニメーション

肉球の足跡が左右交互に現れるプログレスバーアニメーション。立体感のある肉球が歩くような表示されます

HTML

<div class="paw-track" id="pawTrack"></div>

CSS

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Paw Track Container */
.paw-track {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    height: 40px;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 0.5px,
            rgba(0,0,0,0.015) 0.5px,
            rgba(0,0,0,0.015) 1px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 0.5px,
            rgba(0,0,0,0.015) 0.5px,
            rgba(0,0,0,0.015) 1px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0,0,0,0.01) 1px,
            rgba(0,0,0,0.01) 2px
        ),
        linear-gradient(
            to bottom,
            #c5c5c5,
            #b8b8b8,
            #acacac
        );
    padding: 10px 20px;
}

/* Individual Paw Print */
.paw {
    width: 30px;
    height: 30px;
    transform: scale(0);
    filter: 
        drop-shadow(-2px -2px 4px rgba(0,0,0,0.25))
        drop-shadow(2px 2px 4px rgba(255,255,255,0.6));
    animation: pawAppear 0.3s ease-out forwards;
    position: relative;
}

.paw svg {
    width: 100%;
    height: 100%;
    fill: #5a5a5a;
    transform: rotate(90deg);
}

/* Paw Animation */
@keyframes pawAppear {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Left paw (top position) */
.paw.left {
    align-self: flex-start;
    margin-top: -4px;
}

/* Right paw (bottom position) */
.paw.right {
    align-self: flex-end;
    margin-bottom: -4px;
}

JavaScript

// SVG path for paw print
const PAW_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M180-475q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180-160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm240 0q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180 160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM266-75q-45 0-75.5-34.5T160-191q0-52 35.5-91t70.5-77q29-31 50-67.5t50-68.5q22-26 51-43t63-17q34 0 63 16t51 42q28 32 49.5 69t50.5 69q35 38 70.5 77t35.5 91q0 47-30.5 81.5T694-75q-54 0-107-9t-107-9q-54 0-107 9t-107 9Z"/>
</svg>
`;

const pawTrack = document.getElementById('pawTrack');
const pawCount = 8;
const baseDelay = 0.3;

// Create paws with alternating left/right positions
for (let i = 0; i < pawCount; i++) {
    const paw = document.createElement('div');
    paw.className = i % 2 === 0 ? 'paw left' : 'paw right';
    paw.innerHTML = PAW_SVG;

    // Last paw gets a slightly longer delay
    paw.style.animationDelay =
        i === pawCount - 1
            ? `${i * baseDelay + 0.15}s`
            : `${i * baseDelay}s`;

    pawTrack.appendChild(paw);
}

このパーツの特徴

左右交互配置 肉球が上下に交互に配置され、歩いているような自然な印象を演出
立体的な質感 drop-shadowで光と影を表現し、地面に押された肉球のリアルな立体感
SVG活用 Material Designの肉球アイコンを活用し、高解像度でもきれいに表示
順次表示アニメーション animation-delayで時間差をつけ、歩く動作を視覚化
背景テクスチャ repeating-linear-gradientで地面のような質感を表現

コードのポイント

立体感のあるdrop-shadowの使用

2方向のdrop-shadowを組み合わせて、肉球に深みと立体感を与えています。暗い影と明るいハイライトで地面に押された質感を表現します。

.paw {
    width: 30px;
    height: 30px;
    transform: scale(0);
    filter: 
        drop-shadow(-2px -2px 4px rgba(0,0,0,0.25))
        drop-shadow(2px 2px 4px rgba(255,255,255,0.6));
    animation: pawAppear 0.3s ease-out forwards;
    position: relative;
}

左右交互の配置ロジック

JavaScriptで肉球を生成する際、インデックスの偶数/奇数でクラスを振り分け、左右に配置しています。

for (let i = 0; i < pawCount; i++) {
    const paw = document.createElement('div');
    paw.className = i % 2 === 0 ? 'paw left' : 'paw right';
    paw.innerHTML = PAW_SVG;

    paw.style.animationDelay =
        i === pawCount - 1
            ? `${i * baseDelay + 0.15}s`
            : `${i * baseDelay}s`;

    pawTrack.appendChild(paw);
}

スケールアニメーションで登場演出

pawAppearアニメーションでは、scale(0.3)から始まり、一度拡大してから元のサイズに戻ることで、弾むような印象を与えます。

@keyframes pawAppear {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

地面のようなテクスチャ背景

複数のrepeating-linear-gradientを重ねることで、微細なパターンの地面テクスチャを表現しています。

.paw-track {
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 0.5px,
            rgba(0,0,0,0.015) 0.5px,
            rgba(0,0,0,0.015) 1px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 0.5px,
            rgba(0,0,0,0.015) 0.5px,
            rgba(0,0,0,0.015) 1px
        ),
        linear-gradient(
            to bottom,
            #c5c5c5,
            #b8b8b8,
            #acacac
        );
}

まとめ

肉球プログレスバーのポイント

かわいさで待ち時間を楽しく 肉球の足跡で、ローディングをポジティブな体験に変換
立体感の表現 drop-shadowによる光と影で、リアルな質感を実現
歩く動作の演出 左右交互配置とanimation-delayで、自然な歩行動作を視覚化
SVGの活用 ベクター形式で高解像度表示にも対応した美しい肉球
背景テクスチャ repeating-linear-gradientで地面のような質感を追加

シンプルなプログレスバーに、キュートな肉球モチーフを加えることで、ユーザーの待ち時間を楽しい体験に変えます。遊び心のあるデザインは、ブランドの親しみやすさを表現する効果的な手段です。