Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Percentage Fill Region Rollout Block for Vue

Six regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A region-by-region rollout for Vue with Ark UI, written for Atlasroll, a fictional global edge platform. The title counts from the data how many of the six regions already run v3.9, and the header ends with the overall rollout as a rolling number, weighted by each region's share of traffic. Under a band rule that meets the rails, six rows run rail to rail with hairlines between them. Each row's own background is its progress: a tint fills from the start edge to the rolled-out percentage (a rolling row also draws a solid edge at the fill's end). A row names the region with its code and share of traffic, the percentage, the p95 latency, a state as a shape and a word (a checked filled square for Complete, a half-filled one for Rolling, an empty one for Queued) and when it ends ("Done Jul 14", or "ETA Jul 17"). The block ends on the last row. On a phone the latency and the end date drop and the state sits under the name. It's built from Sliding Number and Guides, with CSS only for the fills and your theme's tokens for every colour. The regions are fictional and the figures are example data.

FAQ

How do I change the regions and their progress?

Edit REGIONS at the top of the file: each has a code, a name, the percent of its fleet on the new version, its share of traffic, the p95 latency and an ISO date for when it finished or is expected to. The count in the title, the overall figure and each row's state word come from that list. The overall figure is the sum of percent times share over the total share, rounded.

How does the fill work, and is it only colour?

Each row carries one variable, its share as a fraction, and a tint spans that fraction of the row's track from the start edge, growing once on load (with reduced motion it simply appears). The percentage is also written as text, and the state is a shape and a word, so nothing depends on seeing the tint. The tint is a solid mix of the foreground and the background, so text on it keeps its contrast.

What does a queued region show?

Its fill is empty, its percentage reads 0%, the latency says "No data" because nothing has been measured on the new version yet, and its end date is an estimate ("ETA Jul 20"). A finished row says "Done" with the day.

What is dropped on a phone?

The latency and the end date columns are hidden below md, the state moves under the region's name and the percentage stays at the end of the row. Nothing scrolls sideways at 320 pixels.

Does it work in a right-to-left layout?

Yes. The rows, the fill and its edge start on the right, the shapes keep their order, and the percentages, latencies and dates are isolated so they don't reorder.

All 200 changelog blocks