Tailwind CSS File Uploading Progress

The File Uploading Progress Component visually represents the upload process, improving user engagement and awareness during file transfers.

Heads up!

Please note, this component primarily demonstrates the User Interface (UI) flow and does not include functional JavaScript features.

Just uploaded file

A single just uploaded file example.

preline-ui.xls

7 KB

In progress file

A single in progress file example.

preline-ui.xls

7 KB

25%

Completed

This is a successfully uploaded file example.

preline-ui.xls

7 KB

100%

Error

A failed uploaded file example.

preline-ui.xls

7 KB

25%

Multiple files: Just uploaded

Multiple files in card style with indication of statuses.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

3 left

Multiple files: In progress

Success state.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

1 left

Multiple files: Error

Error state.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

2 success, 1 failed