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

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Inicioヘルプ
アップロード進捗をリアルタイム表示!SSEで届く光 | ギフプロ | ギフプロ