RYX

Blog

Web制作 — 2026.02.05

【コピペOK】簡単に5分で実装できるローディングアニメーション

← ブログ一覧に戻る

はじめに

HTML/CSSは問題ないのに、JavaScriptになると手が止まる。そんなときに地味に面倒なのがローディング演出です。

でも実際は、ローディングの基本は「表示する要素」と「消すタイミング」さえ押さえれば数行で作れます。

この記事では、コピペでそのまま使えるローディング実装をまとめました。

スピナーの基本形から、パルス・プログレスバー・スケルトンスクリーンまで、すぐ動くサンプルを用意しています。

短時間で動作確認しつつ、実案件に流用できる形で解説していきます。

見本

今回は以下のようなものを作成していきます。

ロードしてみてください

ローディングアニメーションの実装

1. HTML

まずは、HTMLの構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなローディングアニメーション</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading" id="loading">
        <div class="spinner"></div>
        <p class="loading-text">Loading...</p>
    </div>
    <div class="content" id="content">
        <!-- メインコンテンツがここに入ります -->
        <h1>コンテンツが表示されました！</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

このHTMLでは、主に4つの重要な要素があります。

  1. ローディングコンテナ - 画面全体を覆うオーバーレイとして機能し、JavaScriptで制御します
  2. スピナー要素 - CSSアニメーションの中心となる回転する要素です
  3. ローディングテキスト - ユーザーへのフィードバックとアクセシビリティのために配置します
  4. コンテンツコンテナ - 実際のページコンテンツを格納し、ローディング完了後に表示します

この構造により、ローディング中の表示とコンテンツの切り替えをスムーズに行うことができます。

2. CSS

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


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


.loading-text {
    margin-top: 15px;
    font-family: Arial, sans-serif;
    color: #333;
}


.content {
    display: none;
}


.show {
    display: block;
}

このCSSコードの主要なポイントは以下の通りです。

ローディング画面のスタイル（.loading）

  • position: fixed と top/left: 0 で画面全体を覆う
  • width/height: 100% で画面いっぱいに広がる
  • display: flex と各種配置プロパティで中央揃えを実現
  • z-index: 1000 で最前面に表示

スピナーのスタイル（.spinner）

  • 円形の形状を width/height と border-radius で作成
  • グレーの円周に青いアクセントを border で表現
  • animation: spin で回転アニメーションを適用

アニメーションの定義（@keyframes）

  • 0度から360度までの回転を1秒間で繰り返し
  • linear で一定速度の滑らかな動きを実現

コンテンツの表示制御

  • 初期状態では display: none で非表示
  • .show クラスで display: block に切り替え

3. JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content')


// ローディング画面を表示する関数
function showLoading() {
    loading.style.display = &apos;flex&apos;;
    content.classList.remove(&apos;show&apos;);
}

// ローディング画面を非表示にする関数
function hideLoading() {
    loading.style.display = &apos;none&apos;;
    content.classList.add(&apos;show&apos;);
}

// 2秒後にローディング画面を非表示にする
setTimeout(hideLoading, 2000);



});

このJavaScriptコードでは、ローディング表示を制御する基本的な機能を実装しています。

主要なポイントは以下の通りです。

初期設定

  • DOMContentLoaded イベントで DOM 読み込み完了を待機
  • 必要な要素を getElementById で取得

制御関数

  • showLoading関数
  • ローディング画面を表示
  • コンテンツを非表示に

hideLoading関数

  • ローディング画面を非表示
  • コンテンツを表示

タイミング制御

  • setTimeout で2秒後に自動的に切り替え
  • 実際のアプリケーションでは、データ読み込みなどの完了を待つように変更可能

カスタマイズ

ローディングアニメーションのカスタマイズパターン集を紹介させていただきます。

どれもコピペで作成可能ですので、参考にしてみてください。

今後も逐次追加していきます！

1. パルス型ローディング

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>パルス型ローディング</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading" id="loading">
        <div class="pulse-container">
            <div class="pulse-bubble pulse-bubble-1"></div>
            <div class="pulse-bubble pulse-bubble-2"></div>
            <div class="pulse-bubble pulse-bubble-3"></div>
        </div>
        <p class="loading-text">Loading...</p>
    </div>
    <div class="content" id="content">
        <h1>コンテンツが表示されました！</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}


.pulse-container {
    display: flex;
    justify-content: space-between;
    width: 100px;
}


.pulse-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3498db;
}


.pulse-bubble-1 {
    animation: pulse 0.4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
    animation: pulse 0.4s ease 0.2s infinite alternate;
}
.pulse-bubble-3 {
    animation: pulse 0.4s ease 0.4s infinite alternate;
}


@keyframes pulse {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0.25;
        transform: scale(0.75);
    }
}


.content {
    display: none;
}


.show {
    display: block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content');


// ローディング画面を表示する関数
function showLoading() {
    loading.style.display = &apos;flex&apos;;
    content.classList.remove(&apos;show&apos;);
}

// ローディング画面を非表示にする関数
function hideLoading() {
    loading.style.display = &apos;none&apos;;
    content.classList.add(&apos;show&apos;);
}

// 3秒後にローディング画面を非表示にする
setTimeout(hideLoading, 3000);



});

2. プログレスバー型ローディング

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プログレスバー型ローディング</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading" id="loading">
        <div class="progress-container">
            <div class="progress-bar" id="progress"></div>
        </div>
        <p class="loading-text">Loading: <span id="progress-text">0%</span></p>
    </div>
    <div class="content" id="content">
        <h1>コンテンツが表示されました！</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}


.progress-container {
    width: 300px;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}


.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    transition: width 0.3s ease;
}


.content {
    display: none;
}


.show {
    display: block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content');
    const progressBar = document.getElementById('progress');
    const progressText = document.getElementById('progress-text');


let progress = 0;

function updateProgress() {
    if (progress &lt; 100) {
        progress += Math.random() * 30;
        if (progress &gt; 100) progress = 100;

        progressBar.style.width = `${progress}%`;
        progressText.textContent = `${Math.round(progress)}%`;

        if (progress &lt; 100) {
            setTimeout(updateProgress, 200);
        } else {
            setTimeout(() =&gt; {
                loading.style.display = &apos;none&apos;;
                content.classList.add(&apos;show&apos;);
            }, 500);
        }
    }
}

updateProgress();



});

3. スケルトンスクリーン型ローディング

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スケルトンスクリーン型ローディング</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading" id="loading">
        <div class="skeleton-container">
            <div class="skeleton-header"></div>
            <div class="skeleton-text"></div>
            <div class="skeleton-text"></div>
            <div class="skeleton-text short"></div>
        </div>
    </div>
    <div class="content" id="content">
        <h1>コンテンツが表示されました！</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

.loading {
    padding: 20px;
}


.skeleton-container {
    max-width: 600px;
    margin: 0 auto;
}


.skeleton-header {
    height: 40px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 20px;
}


.skeleton-text {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}


.skeleton-text.short {
    width: 70%;
}


@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.content {
    display: none;
}


.show {
    display: block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content');


// ローディング画面を表示する関数
function showLoading() {
    loading.style.display = &apos;flex&apos;;
    content.classList.remove(&apos;show&apos;);
}

// ローディング画面を非表示にする関数
function hideLoading() {
    loading.style.display = &apos;none&apos;;
    content.classList.add(&apos;show&apos;);
}

// 3秒後にローディング画面を非表示にする
setTimeout(hideLoading, 3000);



});

さいごに

この記事ではJavaScriptでのローディングアニメーション実装について、基本から実践的な使用方法まで解説してきました。

主要なポイントは以下の通りです。

  • 基本的なローディングアニメーションは、HTML、CSS、JavaScriptの連携で簡単に実装できる
  • プログレスバーやカスタムアニメーションで、サイトの雰囲気に合わせたデザインが可能
  • エラーハンドリングや互換性対応を忘れずに実装することが重要

簡単にサイトリッチに仕上げることができるので、ぜひ参考にしてみてください。

Contact

Shopifyのご相談はこちら

構築・移行・改修・運用改善まで。状況を伺って最短ルートをご提案します。

相談・見積もり無料 / 24時間以内に返信

無料相談 ↗見積もり
← ブログ一覧に戻る
相談する