Back to product momentsMotion Pack 17 · Feedback
Upload complete
When a file lands, use progress, availability, and a new asset row to explain the result.
Launch checklist.pdf2.4 MBUpload
Build upload-complete feedback: after Upload, let progress finish quickly, switch the state from Uploading to Available, and insert an asset record with filename and size. Use transform, opacity, short timing, and a reduced-motion treatment.
Input feedbackPress / Tap feedbackThe upload action immediately acknowledges input when file processing starts.State changePerceived performanceThe progress track and processing state keep the brief wait legible.State changeText morphUpload state changes from ready to available in the same location.EntranceScale inThe new asset row lands in the list with slight scale and upward travel.Reduced motionReduced motionReduced motion retains progress, availability, and the new asset record.
Motion rules
Progress, availability, and the asset list update as one continuous flow.
Reduced motion
Keep progress value, state copy, and the asset record while omitting entrance travel.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.