shadcn.io is not affiliated with official shadcn/ui
Tick Dial Hero Metric Stats Block for Solid
A hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
Installation
Overview
A tick dial for Solid with Ark UI. Sixty short ticks run round a clock face from twelve o'clock; the first ones, as many as the share of the goal raised, are drawn at full weight and the rest faint, and the amount raised, "$184K of $250K goal", sits in the middle. The dial is a framed square (a hairline frame with a + on each corner) at the start of a reverse split. At the end, a header that says what is left, "$65,680 to go, 19 days left", the percent funded as a big number and four facts (raised, still to raise, backers, average pledge) in one hairline frame. The ticks sweep in once. The ticks, the middle, the percent and the facts are all computed from one set of campaign figures, so the dial and the text always agree. It is not a continuous ring and has no needle. It is built from Guides, the Sliding Number, a small inline SVG and CSS transitions. For fundraising, goals and quotas.
FAQ
How do I change the campaign?
Edit CAMPAIGN at the top of the file: the amount raised and the goal, the backers and the days left. The percent, the number of lit ticks (LIT, out of TICKS), the amount still to raise, the average pledge and the dial's text alternative are all worked out from it.
How are the ticks drawn?
Each tick is a short path from an inner to an outer radius, six degrees from the last, computed when the module loads and drawn in a 200 by 200 SVG. Lit ticks use the text colour and the others a faint 15% of it. The middle of the dial is HTML, so it stays crisp and selectable.
Can I use a different number of ticks?
Yes. Change TICKS: the geometry, the lit count and the text alternative follow. Sixty reads like a clock face; forty or a hundred suits a goal that is easier to think of in tens.
Is it accessible?
Yes. The dial is an image whose name says how many ticks are lit and the share of the goal, and the same numbers are in the text beside it: the percent, the amount to go and the four facts, as a description list. Values sit in bdi elements so a right-to-left page keeps them in order, and the dial is dir="ltr".