Components
Progress that tells you what is happening
One ov-progress follows a file from selection through transfer and processing. It shows bytes, speed and an estimated time, then a drawn check when the file is ready.
Waiting
A file is ready to send.
Sending
Bytes, speed and time left update while the file travels.
Paused
The connection dropped; the upload resumes when it returns.
Processing
The server is making the file playable.
Done
The check draws when the upload finishes.
Failed
A plain reason and Retry appear together.
Use it
<link rel="stylesheet" href="/shared/ov-upload.css">
<script src="/shared/ov-upload.js" defer></script>
<ov-progress id="transfer"></ov-progress>
<script>
const p = OVUpload.progress(document.querySelector('#transfer'), { onRetry: retry });
p.update({ state: 'sending', done: 8388608, total: 33554432 });
p.update({ state: 'processing', message: 'Making thumbnails' });
p.update({ state: 'done' });
</script>States: waiting, sending, paused, processing, done and failed. The server can name each processing step through message.
Tokens: --ov-accent for focus and Retry, --ov-line for the track and borders, --ov-surface for the card. The gradient is OpenVibe blue, purple and rose. Reduced motion stops the sheen, pulse and check animation.