Real-time Upload Progress with SSE - Stream & Notify
CODE PREVIEW
エディタを読み込み中…
P
Prompt
Create a single HTML file that demonstrates Server-Sent Events (SSE) for real-time upload progress notification. The page should have a simple file upload button (simulated progress) with a progress bar that updates every 500ms via EventSource. Show a status message for each step (e.g., 'Connecting...', 'Uploading... 20%', 'Processing...', 'Complete!'). Use a clean dark UI with neon accents. Include a small animation on the progress bar with GSAP. Keep dependencies: Swiper not needed, GSAP from CDN, no Vue/React. Ensure the demo works standalone without a backend (simulate SSE with a mock interval inside JS). The page must be fully functional in a browser.
このデモは、バックエンドなしでServer-Sent Events（SSE）を使ったリアルなアップロード進捗表示を実現します。ファイル選択をトリガーに模擬SSEストリームが起動し、500msごとにプログレスバーとステータスを更新。GSAPでバーに微アニメーションを追加し、ダークネオンUIで視認性も高い。SSEの学習やダッシュボードへの組み込みに最適です。
Prompt Overview
This demo shows how Server-Sent Events (SSE) can power a realistic upload progress indicator without a backend. The file selection activates a simulated SSE stream that updates a progress bar and status text every 500ms. GSAP adds subtle animation to the bar, and the dark neon theme makes the feedback clear. Great for learning SSE patterns or embedding in dashboards.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選