Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Before and After Load Time Stats Block for Vue

A page-speed comparison with the time before a tune, the time after it, and the seconds saved on a connecting line between two dots.

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 before-and-after for Vue with Ark UI. Speedwell, a page-speed tuner, puts the result in the middle of the page: a centred header names the time after the tune, then three parts sit in a row. The time before is muted, at the start. The time after is large, at the end, and rolls up once it scrolls into view. Between them a chip shows the seconds saved, on a connecting line with a dot at each end. Two dividers separate the three parts. On a phone the three stack and the line runs downward, with a down arrow. The seconds saved and the percent faster are computed from the two readings. It's built from SlidingNumber, Badge and Guides. The chip is filled with the foreground colour, and nothing is tinted green or red.

FAQ

How do I change the two times?

Edit BEFORE_TENTHS and AFTER_TENTHS at the top of the file. They are tenths of a second, so 48 is 4.8 s. The saved time and the percent faster are the difference and that difference as a share of the time before, so the chip always agrees with the two readings.

What does the chip show?

The seconds saved, with a true minus sign, and under it how much faster that is as a percent of the time before. A lower time is the improvement, which is why the chip says "faster" rather than a signed percent on its own.

Why isn't the improvement green?

A drop is good for a load time and bad for revenue, so the block does not colour the direction. The before reading is muted, the after reading is the largest type, and the chip says "−2.9 s" and "60.4% faster" in words.

Is the comparison accessible?

Yes. The two readings are a description list: each label is read before its time, even though the time is drawn large. The connecting line, the dots and the down arrow are hidden from assistive technology because the chip states the change. The times and the chip are kept left to right, so a right-to-left page doesn't move the unit or the minus sign.

How does it fit on a phone?

The three parts stack: the time before, the chip on a vertical line with a down arrow, then the time after. Each divider becomes a top rule. Nothing scrolls sideways at 320 pixels.

What moves?

The header and the comparison fade up once when the page loads, and the time after rolls up once it scrolls into view. A screen reader hears the final time immediately. With reduced motion the fade is off and the digits change in place.

All 122 stats blocks