TangibleXP · loading states

Spinners

Four directions for the dashboard's loader, in the Moss palette, each at page size and inside a button. Option 1 is the sibling of tangible.one's chosen spinner: the same Tangible tiles, in TXP's colours.

Decided 15 Oct

Badge sheen (option 2): app boot and full-page waits.
Panel lamps (option 3): every inline wait, and every job on an existing app.
Tangible tiles (option 1): one ceremony only, a new app being built, as a real progress meter. See the build below.
Content panels keep their skeletons.

Creating backup…

Option 1 · new-app build only

Tangible tiles, Moss

tangible.one's logo-tile pulse in brand dark, with the bottom tile in lime sheen. One family across both products; the mark is already at the left of the TXP wordmark.

Creating backup…

Option 2 · page waits

Badge sheen

The XP badge with its lime glow orbiting inside. Most "TXP" of the four, but it needs ~20 px to read, so it suits page and overlay loads, not buttons (no inline version).

Creating backup…

Option 3 · inline waits

Panel lamps

Three indicator lamps in a recessed well, lighting in turn. Straight out of the Panel language (StatusLamp, wells, bevels); reads as "machine working". Scales down cleanly.

Creating backup…

Option 4

Meter sweep

An indeterminate meter: a green-to-lime segment sliding through the same well the progress bar sits in. Quietest option; pairs with the determinate bar when a job reports progress.

Creating backup…

Today

TUI default ring

What the SPA shows now: the component library's generic ring. The baseline the options replace.

Ceremony · a new app being built

The Tangible mark assembles as the build runs

Each ink tile lands when a provisioning step finishes; the lime tile lands only when the site is up. While a step runs, the next tile breathes as a ghost. On success a sheen sweeps the finished mark once. On failure the ghost turns into a danger outline and the landed tiles stay: "got this far". Steps and timings are simulated here; in the SPA they come from the build's step timeline.

Ready to build acme-shop.

Reserving your server
Creating the database
Installing WordPress
Applying your blueprint
Issuing the certificate