Agent skill
ascii-progress-and-spinner
Design ASCII progress bars and spinners for CLI UX (determinate/indeterminate, TTY single-line refresh, non-interactive log fallback) with copy-pastable style specs. Use when the user needs terminal progress indicators, loading animations, or CLI feedback elements.
Install this agent skill to your Project
npx add-skill https://github.com/partme-ai/full-stack-skills/tree/main/skills/ascii-skills/ascii-progress-and-spinner
SKILL.md
When to use this skill
CRITICAL TRIGGER RULE
- Use this skill ONLY when the user explicitly mentions the exact skill name:
ascii-progress-and-spinner.
Trigger phrases include:
- "ascii-progress-and-spinner"
- "use ascii-progress-and-spinner"
- "用 ascii-progress-and-spinner 生成 ASCII 进度条"
- "使用 ascii-progress-and-spinner 做 spinner / loading"
Boundary
- Do not integrate a specific UI framework; output styles + refresh rules + fallback protocol + examples.
- Must cover:
- determinate progress bars
- indeterminate spinners
- non-TTY / redirected-output fallback (log lines, no carriage-return updates)
How to use this skill
Inputs
- mode (determinate | indeterminate)
- width (default 40)
- showPercent (default true)
- showEta (optional)
- multiTask (optional)
- colorMode (none | ansi256, default none)
Outputs (required)
- progressBarStyles (>= 3)
- spinnerStyles (>= 2)
- renderRules (TTY single-line refresh vs logLines)
- fallbackRules (non-interactive / redirected output)
Recommended render rules
- TTY (interactive): single-line refresh (overwrite previous line), avoid log spam
- Non-TTY (logs): print log lines (no overwrite). Each line may include task name + percent.
Inline Style Examples
Progress bar styles:
Style 1 (block): [████████░░░░░░░░░░░░] 42% ETA 3s
Style 2 (hash): [########............] 42% ETA 3s
Style 3 (arrow): [========>-----------] 42% ETA 3s
Spinner styles:
Style 1 (braille): ⠋ Loading... → ⠙ Loading... → ⠹ Loading...
Style 2 (pipe): | Loading... → / Loading... → - Loading...
Non-TTY log fallback:
[task-1] 25% complete
[task-1] 50% complete
[task-1] 75% complete
[task-1] 100% complete - done (4.2s)
Workflow
- Determine mode:
determinate(known total) orindeterminate(spinner) - Select styles from the style gallery (>= 3 progress, >= 2 spinner)
- Define render rules: TTY uses single-line refresh, non-TTY uses log lines
- Define fallback rules for redirected output (no carriage returns)
- Validate: Fixed-width percent field, no jitter, grep-friendly log mode
Script
scripts/demo.py: local demo for progress bar + spinner shapes
Examples
examples/styles.md
Quality checklist
- Fixed width (percent field is fixed-width to avoid jitter)
- Log mode is grep-friendly (no overwrite)
- ASCII-only defaults are available (avoid ambiguous-width Unicode)
Keywords
English: ascii-progress-and-spinner, progress bar, spinner, loading, tty, non-interactive, log output, ascii 中文: ascii-progress-and-spinner, 进度条, Spinner, Loading, 终端, TTY, 日志降级, ASCII
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ocrmypdf-batch
OCRmyPDF batch processing skill — process multiple PDFs, Docker automation, shell scripting, and CI/CD integration. Use when the user needs to OCR many PDFs, set up automated OCR pipelines, or integrate OCR into workflows.
ocrmypdf-optimize
OCRmyPDF optimization skill — compress PDFs, configure PDF/A output, JBIG2 encoding, and lossless optimization. Use when the user needs to reduce PDF file size, create archival PDF/A files, or optimize OCR output.
ocrmypdf-image
OCRmyPDF image processing skill — deskew, rotate, clean, despeckle, remove border from scanned documents. Use when the user needs to improve scanned PDF quality, fix skewed pages, remove noise, or clean up scanned documents before OCR.
ocrmypdf-api
OCRmyPDF Python API and plugin skill — use OCRmyPDF programmatically from Python, integrate with applications, and extend with plugins (EasyOCR, PaddleOCR, AppleOCR). Use when the user needs to call OCRmyPDF from Python code, build OCR pipelines, or use alternative OCR engines.
ocrmypdf
OCRmyPDF core skill — add searchable OCR text layer to scanned PDFs, convert images to searchable PDFs, support 100+ languages via Tesseract. Use when the user needs to OCR a PDF, make a scanned PDF searchable, or extract text from scanned documents.
svelte
Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.
Didn't find tool you were looking for?