ascii-progress-and-spinner
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
More from partme-ai/full-stack-skills
vite
Guidance for Vite using the official Guide, Config Reference, and Plugins pages. Use when the user needs Vite setup, configuration, or plugin selection details.
68element-plus-vue3
Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.
63vue3
Guidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.
54electron
Build cross-platform desktop applications with Electron, covering main/renderer process architecture, IPC communication, BrowserWindow management, menus, tray icons, packaging, and security best practices. Use when the user asks about Electron, needs to create desktop applications, implement Electron features, or build cross-platform desktop apps.
51ascii-cli-logo-banner
Entry point for ASCII CLI banners that routes to the Python built-in font skill or figlet.js/FIGfont skill. Use when the user wants a startup banner, ASCII logo, terminal welcome screen, or CLI branding for a service.
38ant-design-vue
Provides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
33