Progress

How far a long job has come: files copying, an update downloading. A 4-pixel line, the accent on a quiet track, always with words beside it.

Part of a file manager window with three files listed and, under them, the line "Copying photos-october.zip to Backup drive, 62 %" with a thin bar below it filled to a little more than half.

Use it for a job that takes long enough to watch. The bar says how far; the words beside it say what the job is. When the end is not known, the bar sends a stretch along itself instead.

Anatomy

A thin bar filled to 60 percent under the words Copying Name, with numbered callouts on the reached part, the track and the words. — The bar at its normal height, with the words that go with it.

ReachedThe accent, from the left to value.
TrackThe past ink, the whole length. It is the same ink the kit uses for lyrics already sung.
WordsWhat the job is, in the page's own text. The part has no text of its own; its label is for screen readers.

States

Five bars, numbered: not started, a quarter, more than half, done, and one whose end is not known, with a short stretch of accent partway along the track. — The five states. The last is one moment of a loop.

Not startedA dot of the reached colour, as wide as the bar is high.
A quarterThe reached part is a quarter of the track.
More than halfThe reached part moves to the new value over 250 ms.
DoneThe reached part fills the track.
End not knownSet going. A stretch of accent, a third of the bar and at most 220 pixels, moves from off the left end to off the right in 1400 ms (the sweep motion), again and again. With reduced motion on it stays still at the start of the bar.

Sizes

A bar at twice its size, 4 pixels high and 240 wide before it is given a width. — The bar at twice its size.

Part	Value
Height	4, ends fully round
Width	240 until the page sets one; fill the room you have
Reached part	Width times `value`, never less than the height
Reached part moving	250 ms, the Arrive small curve
Going	1400 ms for a pass, easing in and out

Accessibility

The bar is a progress bar named by label. A screen reader reads value between 0 and 1. While going there is no value to read, so it hears an activity indicator that is in progress.
It is not a stop for Tab and does not answer the pointer. Stopping a job is a word action beside it.
The reached part and the track differ by lightness. They are never the only way to learn how far the job is: the words carry it too.

Writing

Say the job and the amount: "Updating Tacit, 38 %". Add the time left only when it is known: "About 4 minutes left". When it is not known, say what is happening and leave the number out.

Do and don't

A bar at 38 percent with the words Updating Tacit, 38 %, above it and About 4 minutes left below. — DoPut the job and the amount in words beside the bar.

A bar at 38 percent with nothing around it. — Don'tLeave a bar on its own. It does not say what is waiting.

Code

import Tacit.Kit

Column {
    TacitText { text: "Copying " + job.name; ink: "sec" }
    Progress {
        width: parent.width
        value: job.done / job.total      // 0 to 1
        going: job.total === 0           // the end is not known
        label: "Copying " + job.name
    }
}

Property	What it does
`value`	How far, 0 to 1
`going`	The end is not known: a stretch moves along the bar
`label`	What a screen reader says
`minimumValue`, `maximumValue`	Read only: 0 and 1, the range a screen reader reads `value` against

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.