Si necesitas una barra de progreso en PSD para un mockup, una interfaz o una presentación a cliente, aquà tienes 8 plantillas gratuitas para Photoshop: horizontales, circulares y en formato mockup, listas para adaptar a tu proyecto.
He revisado y verificado esta selección (publicada originalmente en 2015) recurso por recurso, después de comprobar que buena parte de las vistas previas originales ya no cargaban.
Barras de progreso lineales
El formato más habitual: una barra horizontal que se rellena de izquierda a derecha según el porcentaje de avance.
- Progress Bar PSD: barra horizontal sencilla, fácil de recolorear. Formato PSD.
- Clean Progress Bar PSD: versión minimalista, buena base para interfaces limpias. Formato PSD.
- Simple Progress Bar PSD Template: plantilla con capas bien organizadas, cómoda para editar rápido. Formato PSD.
- Progress Bar Free PSD: variante con degradado, útil si buscas algo con más volumen visual. Formato PSD.
¿Necesitas un kit de UI completo, no solo la barra de progreso? En Envato Elements tienes cientos de elementos de interfaz (barras, botones, formularios) con licencia comercial, por suscripción.
Barras de progreso circulares
Cuando el espacio es reducido (un widget, una tarjeta, un icono de estado), el formato circular comunica el avance sin ocupar tanto ancho.
- Circular Progress Bars PSD: set de anillos de progreso en distintos porcentajes, ideal para dashboards. Formato PSD.
- Circular Progress Bars PSD (variante): otra composición circular, con más grosor de trazo. Formato PSD.
Sets y mockups de UI
Si necesitas varias variantes ya organizadas o ver la barra dentro de una pantalla completa, estas dos van más allá de un único diseño suelto.
- UI Progress Bars PSD: set con varias variantes de barra dentro del mismo archivo, útil para elegir estilo sobre la marcha. Formato PSD.
- Progress Bar Free Mockup: la barra ya presentada dentro de una pantalla de interfaz, útil para mostrarla en contexto a un cliente. Formato PSD.
Más bancos de plantillas de progreso
Si ninguna de las anteriores encaja, estos dos directorios reúnen bastantes más diseños PSD de barras de progreso y carga:
- Free UI Progress Bar PSD: colección de plantillas de barra de progreso para interfaz.
- 30 Free Amazing PSD Loading and Progress Bar Designs: recopilación amplia con más variedad de estilos.
Preguntas frecuentes
¿Puedo usar estas plantillas en un proyecto comercial?
Revisa la licencia en la página de descarga de cada plantilla: la mayorÃa permite uso personal y comercial con atribución. Si necesitas libertad total, valora un banco de pago como Envato Elements.
¿Estas plantillas son solo un diseño estático o funcionan de verdad?
Son diseños estáticos en PSD: te sirven para maquetar cómo se verá la barra en distintos estados de avance, pero para que se anime de verdad en una web necesitas implementarla con CSS/JavaScript. Si es lo que buscas, tengo una guÃa de barras de progreso con jQuery con demo incluida.
¿Cuándo usar una barra circular en vez de lineal?
Cuando el espacio es reducido (widgets, tarjetas, iconos de estado) o cuando el diseño ya usa formas circulares en otros elementos de la interfaz.
¿Hay alternativa si no quiero usar Photoshop?
SÃ: si el resultado final es para una web, el elemento nativo <progress> de HTML5 o una librerÃa como jQuery UI evitan tener que maquetar la barra a mano.
No te pierdas los próximos packs de elementos UI gratis
Cada vez que publico una selección nueva de recursos gratis, aviso primero por correo. Apúntate y te llega directo.
Si te han sido útiles, compártelas con quien las pueda necesitar.
