プログレスバー
マイクロインタラクションデザインのプログレスバーコンポーネント。レスポンシブ効果と、HTML と CSS (Tailwind CSS) のみを使用したダーク テーマのサポートが含まれています。
HTMLコード
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>
<style>
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 45%; }
}
.dark .bg-blue-600 {
background-color: #90cdf4; /* Lighter blue for dark mode */
}
/* Responsive considerations */
@media (max-width: 768px) {
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 60%; } /* Wider progress on smaller screens */
}
.bg-blue-600 {
animation: progress-animation 2s infinite; /* Apply animation again for clarity */
}
}
</style>関連コンポーネント
サイバーパンクネオレトロプログレスバー
サイバーパンク、ネオレトロな美学、暗い背景、落ち着いたビンテージアクセントカラーを備えた適度な複雑さのプログレスバーコンポーネントで、エンターテインメント/メディアプラットフォーム向けに設計されています。セグメント化されたプログレスディスプレイが特徴で、ダークモードをサポートして完全にレスポンシブです。