搜索组件

类别

组件进度指示器

进度指示器

正在进行的过程的可视化指示

进度指示器组件

一个简单的进度指示器，设计有玻璃形态效果，适用于支持深色模式和单色配色方案的电子商务网站。

                <div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

进度指示器组件

一个极简的进度指示器组件，旨在使用鲜艳的色彩和响应式设计以及深色主题支持来展示投资组合进度。

打开预览

                <div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

进度指示器组件

一个简单的 Progress Indicators 组件，其灵感来自 80 年代和 90 年代的复古/复古美学，采用互补的配色方案。专为社交媒体界面设计，并支持深色主题。

打开预览

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

进度指示器组件

适用于社交媒体界面的中构式进度指示器，具有简单的布局和响应式设计，并支持深色模式。

打开预览

                <div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

进度指示器组件

一个3D设计风格的进度指示器组件，具有灰度配色方案，适用于博客内容消费，具备响应式设计和深色模式支持。

打开预览

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

玻璃化进度指示器组件

玻璃态进度指示器组件，具有鲜艳的色彩方案和简单的复杂度。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

3D进度条组件

具有3D效果、Tailwind CSS、响应式设计和暗黑模式支持的样式。

打开预览

                <div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

进度指示器组件

一个进度指示器组件，具有玻璃摩尔风格、响应式设计和暗模式支持。使用Tailwind CSS进行样式设计。

打开预览

                <div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    
    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>

    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>

  </div>
</div>

进度指示器组件

一个复古/复古风格的进度指示器组件，使用 Tailwind CSS 具有响应式效果和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

进度指示器组件

这是一个使用 Tailwind CSS 样式化的材料设计进度指示器组件，具有响应式效果和暗黑主题支持.

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>