アップロード進捗をリアルタイム表示!SSEで届く光
VISTA DE CÓDIGO
エディタを読み込み中…
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の学習やダッシュボードへの組み込みに最適です。
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選