piapia123
es

Generador de barras de progreso en texto

Texto

Todo se ejecuta en tu navegador: no se sube nada

Entrada
Arrastra un archivo aquí para cargarlo
Resultado

Convierte líneas de porcentaje y etiqueta en barras de progreso monoespaciadas, envueltas en un bloque de código listo para pegar en un README. ⚠️ La rampa de octavos `▏▎▍▌▋▊▉█` da 8 niveles por carácter, no 1, así que incluso con un ancho de una docena de caracteres puede mostrar la diferencia entre el 35 % y el 37 %, y por eso gana al estilo de bloques. ⚠️ El ancho se mide por ancho de visualización (un carácter chino ocupa dos celdas), lo que mantiene alineada la columna de etiquetas; el 0 % sale todo vacío y el 100 %, todo lleno, sin celdas sobrantes. Todo se ejecuta en tu navegador.

Funciones

  • Cinco estilos: bloques, degradado, puntos, flechas y octavos
  • La rampa de octavos `▏▎▍▌▋▊▉█` da 8 niveles por carácter, precisión con anchos pequeños
  • El ancho se mide por ancho de visualización, así que las etiquetas CJK no se desalinean
  • El 0 % sale vacío y el 100 % lleno, sin celdas sobrantes en los bordes
  • El porcentaje puede ir dentro de la barra o detrás
  • El porcentaje es opcional y, si falta, se reparte por número de líneas
  • Al final, un bloque de código listo para pegar en un README
  • Todo se ejecuta en local y no se sube nada

Cómo se usa

  1. Escribe un porcentaje y una etiqueta por línea, como `35 Instalando`
  2. Elige un estilo y un ancho
  3. Decide si el porcentaje va dentro de la barra o detrás
  4. Copia el bloque de código en un README o en un ticket

Preguntas frecuentes

¿Por qué los octavos son más precisos?
Porque cada carácter tiene 8 niveles (▏ es 1/8, ▌ es 4/8, █ es 8/8), mientras que un bloque solo está lleno o vacío. Con un ancho de 10, el 35 % son 3 celdas y media (3,5) en octavos, pero un bloque solo puede redondear a 4 celdas. Cuanto más estrecha es la barra, más importa.
¿Cómo se alinean las etiquetas CJK?
Midiendo el ancho de visualización en vez del número de caracteres. En una fuente monoespaciada un carácter chino ocupa dos celdas, así que rellenar por número de caracteres deja esa columna corta y lo desplaza todo. La herramienta mide el ancho real y rellena con espacios, de modo que los sistemas mezclados se alinean.
¿Cómo son el 0 % y el 100 %?
El 0 % sale enteramente vacío (los puntos se vuelven círculos vacíos, los bloques la sombra vacía y los octavos, espacios) y el 100 %, enteramente lleno. Estos dos bordes son donde el redondeo más fácilmente deja una celda suelta, así que se tratan aparte.
¿De verdad se puede pegar en un README?
Sí. La salida termina con un bloque de código cercado como ```text con caracteres monoespaciados, que GitHub, GitLab y la mayoría de los renderizadores de Markdown muestran tal cual. Ojo: algunos renderizadores recortan los espacios finales, así que la alineación depende de que los anchos de las barras coincidan, no del relleno.

Herramientas relacionadas