GifproGifpro

アップロード進捗をリアルタイム表示!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

Inicioヘルプ