この記事にはプロモーションが含まれています。

【コピペOK】プログレスバーアニメーション｜5種類【Web制作】

2025-08-14

ケケンタ

プログレスバーにアニメーション効果を追加したい……

ケケンタ

進捗状況をより魅力的に表示したい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
プログレスバーアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「プログレスバーを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するプログレスバーアニメーション

フェード効果
スライド効果
スケール効果
ズーム効果
フリップ効果

ケケンタ

特にファイルアップロードや処理進捗の表示には、プログレスバーアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/14 12:31:16時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/14 06:21:45時点 Amazon調べ-詳細)

プログレスバーアニメーションとは

プログレスバーアニメーションは、進捗状況を視覚的に表現するアニメーション効果です。ユーザーに現在の処理状況を分かりやすく伝え、待機時間の体感を軽減させる効果的な手法です。

効果的な使用場面

適している場面

ファイルアップロード/ダウンロード
データ処理の進捗表示
フォーム送信の処理中
インストール/更新の進捗
ゲームのローディング画面

避けるべき場面

即座に完了する処理（アニメーションが不要）
正確な進捗が分からない処理
ユーザーが操作を中断できない場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
フリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐

フェード効果

① デモ

See the Pen プログレスバーフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

<div class="progress-container">
  <div class="progress-bar fade-progress">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

<button class="start-btn" onclick="startFadeProgress()">開始</button>

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* フェード固有のスタイル */
.fade-progress .progress-fill {
  background: linear-gradient(90deg, #4CAF50, #45a049);
  transition: width 0.3s ease, opacity 0.5s ease;
  opacity: 0;
  animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

④ JavaScript

function startFadeProgress() {
  const progressFill = document.querySelector('.fade-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressFill.style.opacity = '0';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 15;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // フェード効果を追加
    progressFill.style.opacity = '1';
  }, 200);
}

⑤ カスタマイズ例

/* カラーテーマの変更 */
.fade-progress .progress-fill {
  background: linear-gradient(90deg, #2196F3, #1976D2);
}

/* アニメーション速度の調整 */
.fade-progress .progress-fill {
  animation: fadeInOut 1.5s ease-in-out infinite;
}

/* フェード効果の強度調整 */
@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

スライド効果

① デモ

See the Pen プログレスバースライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的な進捗表示
視覚的インパクトが高い
スムーズなアニメーション

② HTML

<div class="progress-container">
  <div class="progress-bar slide-progress">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

<button class="start-btn" onclick="startSlideProgress()">開始</button>

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* スライド固有のスタイル */
.slide-progress .progress-fill {
  background: linear-gradient(90deg, #FF9800, #F57C00);
  position: relative;
  overflow: hidden;
}

.slide-progress .progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: slideShine 2s infinite;
}

@keyframes slideShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

④ JavaScript

function startSlideProgress() {
  const progressFill = document.querySelector('.slide-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 12;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';
  }, 300);
}

⑤ カスタマイズ例

/* スライド方向の変更 */
.slide-progress .progress-fill::before {
  animation: slideShineVertical 2s infinite;
}

@keyframes slideShineVertical {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* スライド速度の調整 */
.slide-progress .progress-fill::before {
  animation: slideShine 1.5s infinite;
}

スケール効果

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

拡大・縮小による動的表現
視覚的なインパクト
モダンな印象

② HTML

<div class="progress-container">
  <div class="progress-bar scale-progress">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

<button class="start-btn" onclick="startScaleProgress()">開始</button>

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px; 
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* スケール固有のスタイル */
.scale-progress .progress-fill {
  background: linear-gradient(90deg, #9C27B0, #7B1FA2);
  transition: width 0.3s ease, transform 0.2s ease;
  transform-origin: left center;
}

.scale-progress .progress-fill:hover {
  transform: scaleY(1.2);
}

/* スケールアニメーション */
.scale-progress .progress-fill {
  animation: scalePulse 1s ease-in-out infinite;
}

@keyframes scalePulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.1); }
}

④ JavaScript

function startScaleProgress() {
  const progressFill = document.querySelector('.scale-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 10;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // スケール効果を追加
    progressFill.style.transform = 'scaleY(1.2)';
    setTimeout(() => {
      progressFill.style.transform = 'scaleY(1)';
    }, 100);
  }, 400);
}

⑤ カスタマイズ例

/* スケール効果の強度調整 */
.scale-progress .progress-fill:hover {
  transform: scaleY(1.5);
}

/* スケールアニメーションの速度調整 */
.scale-progress .progress-fill {
  animation: scalePulse 0.8s ease-in-out infinite;
}

ズーム効果

① デモ

See the Pen プログレスバーズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的なインパクトが高い
注目を集める効果

② HTML

<div class="progress-container">
  <div class="progress-bar zoom-progress">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

<button class="start-btn" onclick="startZoomProgress()">開始</button>

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* ズーム固有のスタイル */
.zoom-progress .progress-fill {
  background: linear-gradient(90deg, #E91E63, #C2185B);
  transition: width 0.3s ease, transform 0.3s ease;
  transform-origin: center;
  animation: zoomInOut 1.5s ease-in-out infinite;
}

@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

④ JavaScript

function startZoomProgress() {
  const progressFill = document.querySelector('.zoom-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 8;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // ズーム効果を追加
    progressFill.style.transform = 'scale(1.1)';
    setTimeout(() => {
      progressFill.style.transform = 'scale(1)';
    }, 150);
  }, 500);
}

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
.zoom-progress .progress-fill {
  animation: zoomInOut 1.5s ease-in-out infinite;
}

@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ズーム方向の変更 */
.zoom-progress .progress-fill {
  transform-origin: left center;
}

フリップ効果

① デモ

See the Pen プログレスバーフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴

3D的な回転効果
視覚的インパクトが最大
プレミアムな印象

② HTML

<div class="progress-container">
  <div class="progress-bar flip-progress">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

<button class="start-btn" onclick="startFlipProgress()">開始</button>

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* フリップ固有のスタイル */
.flip-progress {
  perspective: 1000px;
}

.flip-progress .progress-fill {
  background: linear-gradient(90deg, #607D8B, #455A64);
  transition: width 0.3s ease, transform 0.6s ease;
  transform-style: preserve-3d;
  animation: flipRotate 2s ease-in-out infinite;
}

@keyframes flipRotate {
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

④ JavaScript

function startFlipProgress() {
  const progressFill = document.querySelector('.flip-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 6;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // フリップ効果を追加
    progressFill.style.transform = 'rotateX(180deg)';
    setTimeout(() => {
      progressFill.style.transform = 'rotateX(0deg)';
    }, 300);
  }, 600);
}

⑤ カスタマイズ例

/* フリップ軸の変更 */
.flip-progress .progress-fill {
  animation: flipRotateY 2s ease-in-out infinite;
}

@keyframes flipRotateY {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* フリップ速度の調整 */
.flip-progress .progress-fill {
  animation: flipRotate 1.5s ease-in-out infinite;
}