About this block

Translation Progress Card shows 8 languages as ruled rows with a thin progress bar, a right-aligned percent and exact string counts, and a status badge. English, Spanish, and German are Live at 480 of 480. French sits at 412 of 480 (85%) and Portuguese, Japanese follow in Preview. Korean at 219 of 480 and Chinese (Simplified) at 298 of 480 are Draft. The header reads 3 of 8 languages live, 480 total strings. The footer draws the policy line: a language goes live only when it reaches 100%, partial translations stay in preview and fall back to English for missing strings.

Languages are one typed array with a LangStatus union, translated and total counts, and percent computed inline. All counts carry tabular-nums. The footer makes the shipping gate explicit so users do not wonder why their 99% language is still in preview.

When to use

Reach for this block at the top of the localization settings page as the summary before the per-locale translation tables. Wire translated and total to your translation store so the bars update as strings are completed.

A natural flow around it on an Application Pro page:

Before

• Settings shell

After

• Translation table
• Language switcher blueprint

What you can display

One strong use is the localization dashboard overview. Other progress card configurations:

• Namespace breakdown. Each row is a string namespace, nav, billing, onboarding, with its own bar so translators see which area needs work.
• Contributor view. Rows sorted by last updated showing who last touched each language and when.
• Single locale focus. One row expanded with a breakdown by namespace bar group below it.

Tip: the 100% gate note in the footer prevents the support ticket asking why a mostly complete language is not showing up for users.