コンポーネントプログレスバー Industrial_Travel_Progress_Bar

Industrial_Travel_Progress_Bar

旅行/観光Webサイト用のシンプルなインダストリアルスタイルのプログレスバーコンポーネントで、紫/紫の配色とダークモードをサポートする完全な応答性が特徴です。

プレビュー

HTMLコード

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
      <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
    </div>

    <div class="p-4 sm:p-5 md:p-6">

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
          <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="mb-4 last:mb-0">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

    </div>
  </div>

</div>

Industrial_Travel_Progress_Bar

プレビュー

HTMLコード

関連コンポーネント

ミニマリストトライアドプログレスバー

ニューモーフィズムプログレスバー

サイバーパンクネオレトロプログレスバー