Componentes de búsqueda

Categorías

Componentes Barra de progreso

Barra de progreso

Indicador que muestra el progreso de finalización

Barra de progreso de neumorfismo

Una barra de progreso de estilo Neumorphism para portafolios, con una combinación de colores pastel, complejidad moderada, capacidad de respuesta y compatibilidad con temas oscuros. No se incluye JavaScript; el componente está construido con HTML y Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

Barra de progreso minimalista

Un componente de barra de progreso de diseño minimalista y plano con colores pastel, adecuado para sitios web profesionales de negocios o corporativos. Tiene un diseño responsivo y admite el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>

Componente de la barra de progreso

Un componente de barra de progreso receptivo diseñado con elementos 3D, utilizando un esquema de color análogo adecuado para el comercio electrónico, con soporte para modo oscuro

Abrir Vista previa

                <div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

Componente de barra de progreso 3D

Un componente de barra de progreso receptivo diseñado para interfaces de redes sociales, con un efecto 3D, esquema de color monocromático y compatibilidad con modo oscuro, creado con Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center py-10">
    <div class="w-full max-w-md">
        <div class="flex justify-between mb-2">
            <span class="text-gray-700 dark:text-gray-300">Progress</span>
            <span class="text-gray-700 dark:text-gray-300">75%</span>
        </div>
        <div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
        </div>
    </div>
    <div class="flex justify-center mt-4">
        <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
    </div>
    <div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>

Barra de progreso de neumorfismo

Un componente de barra de progreso con estilo neumorfismo receptivo diseñado para paneles, que incorpora una función interactiva y admite el modo oscuro.

Abrir Vista previa

                <div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

Componente de la barra de progreso

Un componente simple de la barra de progreso con un diseño brutalista con un esquema de color en escala de grises para aplicaciones de comercio electrónico. Es responsivo y cuenta con soporte para modo oscuro.

Abrir Vista previa

                <div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Barra de progreso Earthy de Material Design

Una barra de progreso inspirada en Material Design con tonos tierra, adecuada para interfaces de redes sociales. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
  <div class="bg-green-700 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
</div>

Componente de la barra de progreso

Un componente simple de la barra de progreso con estilo de vidrio y colores monocromáticos, adecuado para sitios web comerciales y corporativos, con soporte para el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

Barra de progreso de Glassmorphism

Barra de progreso de estilo glassmorphism diseñada para interfaces de redes sociales, con colores vibrantes y compatibilidad con el modo oscuro. Diseño simple sin JavaScript.

Abrir Vista previa

                <div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

Componente de la barra de progreso del modo oscuro

Un componente de barra de progreso de modo oscuro receptivo para sitios web comerciales / corporativos, que utiliza colores vibrantes y elementos interactivos.

Abrir Vista previa

                <div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>