Text Progress Bar Generator
TextEverything runs locally in your browser — nothing is uploaded
Turn lines of percent and label into monospace progress bars, wrapped in a code block ready to paste into a README. ⚠️ The eighths ramp `▏▎▍▌▋▊▉█` gives each character 8 levels, not 1, so even at a width of a dozen characters it can show the difference between 35% and 37% — that is why it beats the plain block style. ⚠️ Width is measured in display width (a Chinese character takes two cells), which keeps the label column aligned; 0% is all empty and 100% is all full, with no leftover cell. Everything runs in your browser.
Features
- Five styles: blocks, gradient, dots, arrows and eighths
- The eighths ramp `▏▎▍▌▋▊▉█` gives 8 levels per character for precision at small widths
- Width measured in display width, so CJK labels stay aligned
- 0% is all empty and 100% is all full, with no leftover cell at the edges
- The percentage can sit inside the bar or after it
- The percentage is optional and averages by line count
- A code block ready to paste into a README at the end
- Everything runs locally and nothing is uploaded
How to use
- Write one percent and label per line, such as `35 Installing`
- Pick a style and a width
- Choose whether the percentage goes inside the bar or after it
- Copy the code block into a README or a ticket
FAQ
- Why are the eighths more precise?
- Because each character has 8 levels (▏ is 1/8, ▌ is 4/8, █ is 8/8) while a block has only filled or empty. At a width of 10, 35% is 3 cells plus a half cell (3.5) in eighths, but a block can only round to 4 cells. The narrower the bar, the more this matters.
- How do CJK labels stay aligned?
- By measuring display width rather than character count. In a monospace font a Chinese character takes two cells, so padding by character count leaves that column short and shifts everything. The tool measures the real width and pads with spaces, so mixed scripts line up.
- What do 0% and 100% look like?
- 0% is entirely empty (dots become circles, blocks become the empty shade, eighths become spaces) and 100% is entirely full. These two edges are where rounding most easily leaves a stray cell, so they are handled separately.
- Can it really be pasted into a README?
- Yes. The output ends with a code block fenced as ```text holding monospace characters, which GitHub, GitLab and most Markdown renderers show as written. Note that some renderers strip trailing spaces, so alignment relies on the bar widths matching rather than on padding.
Related tools
ASCII Art Text
TextDraw letters, digits and symbols as 5×7 block characters with a choice of fill. Good for comment banners, README headings and terminal output.
Text Width
TextFour lengths at once: display width (CJK counts 2), code points, UTF-16 units and UTF-8 bytes, plus a list of lines over 80 or 100 columns.
Line Numbering
TextAdd line numbers in bulk or strip existing ones: six numbering styles, adjustable start and step, zero padding, and blank lines that need not count.
Text Diff
TextCompare two blocks of text online and highlight added, removed and unchanged lines, so only the lines that changed are marked. Runs in your browser.
Word Counter
TextCount Chinese characters and English words separately, alongside characters, lines, real UTF-8 bytes, reading and speaking time, and SMS segment counts.
Text Cleaner
TextClean up a column pasted out of a log or spreadsheet: deduplicate, sort, drop blank lines, trim whitespace and strip line numbers, all in your browser.