AI向け説明 AI Description

進捗を表示するプログレスバー。`width`プロパティを動的に変更して進捗を表示します。シマーアニメーションは`@keyframes shimmer`で実装し、`linear-gradient`と`background-position`をアニメーションさせて光沢効果を表現します。`transition`でスムーズに進捗を更新します。

A progress bar displaying loading progress. Dynamically change the `width` property to show progress. Shimmer animation is implemented with `@keyframes shimmer`, animating `linear-gradient` and `background-position` to create a shine effect. Update progress smoothly with `transition`.

調整可能パラメータ Adjustable Parameters

• --progress-duration — 進捗バーのアニメーション速度 animation duration for progress bar
• --progress-color — プログレスバーのグラデーション色 gradient color for progress bar
• bar height — バーの高さ height of the progress bar

実装 Implementation

HTML + CSS + JS

<div class="progress-bar">
  <div class="progress-bar__fill" data-progress-fill style="width: 0%"></div>
</div>

<style>
.progress-bar {
  width: 100%;
  height: 8px;
  background: #dfe3f6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #5c6ac4, #8c6ff7);
  border-radius: 999px;
  transition: width 0.3s ease;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
</style>

<script>
const fill = document.querySelector("[data-progress-fill]");
let progress = 0;

function updateProgress(value) {
  fill.style.width = value + "%";
}

// 例: 進捗を更新
updateProgress(75);
</script>

React (JSX + CSS)

// react/S-004.jsx
import { useState } from "react";
import "./S-004.css";

export default function ProgressBar({ value = 0 }) {
  return (
    <div className="progress-bar">
      <div
        className="progress-bar__fill"
        style={{ width: `${value}%` }}
      ></div>
    </div>
  );
}

/* react/S-004.css */
.progress-bar {
  width: 100%;
  height: 8px;
  background: #dfe3f6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #5c6ac4, #8c6ff7);
  border-radius: 999px;
  transition: width 0.3s ease;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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