Upload Progress Chip Navbar Block for React

No. The two files (320 and 180 MB), the steps and the timer are constants at the top of the file. Replace start with your upload call and feed the real percentage into step. The meter reads the used figure, which goes up by the size of the files once the chip settles. The meter stops at its limit.

A polite status line speaks twice: "Uploading 2 files, 500 MB." when the upload starts, and "Uploaded 2 files. 8.9 of 15.0 GB used." when it ends, or "Upload cancelled. Nothing was added." The percentage in the chip changes silently, so it never chatters. The meter's bar is hidden from assistive technology because the words beside it carry the numbers.

The pressed button leaves the tab order as its state ends, so focus is moved to the button that replaces it: Cancel while uploading, Done when it settles, and Upload again after Done or Cancel. The unseen states are inert, so a keyboard never lands on them.

Upload, the chip and the settled chip sit in one grid cell, the inactive ones invisible and inert, so the cell is as wide as the widest. The words of the chip hide below sm, where it shows only the percentage or a check and Done, and the full text stays for screen readers.

Below md the links leave the bar, and a menu button opens a sheet from the top with the links and the storage meter. The upload cell stays in the bar at every width. At 320 pixels the bar is the wordmark's icon, the menu button and the cell. Escape closes the sheet and returns focus to the menu button.

The chip's fill grows with a short transition and the states cross-fade in 200 ms; with reduced motion both are instant. The steps still advance, because they are the upload itself, and Cancel is always there. A band of light sweeps across Upload once on hover and keyboard focus, and with reduced motion that light fades in where it stands.