KVADRANT UI api reference demo

KvadrantProgressDots

controls

five dots on a 4.4 s cycle — each one switches off the moment it lands

dark
light

mounted as progress-dots

why it looks like this

Five squares crossing the width, over and over. After the tilt this is the most recognisable motion Metro has, and an approximation of it reads as a knock-off at once — so the numbers are the published ones: five 4×4 px dots, a 4.4 second cycle, each starting 200 ms after the one before it.

The path is not linear. A dot covers the first third in half a second easing out, crawls the middle third linearly over a second and a half, then takes the last third in another half second easing in — which is what makes the group bunch up and stretch out as it travels. Both exponentials are Exponent="1", the gentlest curve in the theme.

And then it disappears. Storyboard.TargetProperty="Opacity" is a pair of DiscreteDoubleKeyFrames per dot — one at nought, nought at 2.5 s — so a dot switches off the instant it lands and the bar is empty for the last stretch of the cycle before the next sweep begins. Leaving it out, which this did, parks five dots against the right-hand edge for over a second of every 4.4 and turns a sweep into a queue.

Read it: kvadrant-core/src/commonMain/kotlin/io/github/youndie/kvadrant/components/KvadrantProgress.kt · the full signature and every parameter