8 plantillas PSD de barras de progreso gratis (UI)

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.

¿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.

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:

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio