RTL Progress Bar
An upload bar that fills from the right, the RTL starting edge
Create an RTL progress bar. A dir="rtl" upload row: a Hebrew status label on the right ('מעלה קבצים…'), a percent readout on the left, and a track below. The fill grows from the RIGHT edge leftward, progress starts where reading starts, by anchoring the fill to the track's inline-start (in RTL that's the right: position it with inset-inline-start: 0 and animate its width, or scaleX with transform-origin at the right edge). A left-anchored fill in an RTL interface reads as draining instead of filling; that inversion is what this component prevents. The percent number sits in a dir="ltr" span with unicode-bidi: isolate and tabular-nums so '47%' never renders as '%47', in accent color and monospace. Ease the progress with an exponential approach (fast start, soft landing, ~50ms ticks). At 100%: the label swaps to 'ההעלאה הושלמה', bar and percent transition to green (0.3s), and a green check badge pops in beside the label with a spring (from 30% scale, stiffness 520, damping 20). Build with logical properties so the same bar flips correctly under dir="ltr". Accessibility: role="progressbar" with aria-valuenow/min/max; the completion announced via aria-live="polite". If prefers-reduced-motion is set, update the width without transitions and skip the pop. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.