アップロード進捗をリアルタイム表示!SSEで届く光
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
Server-Sent Events(SSE)を使って、ファイルアップロードの進捗をリアルタイムで表示するデモを1つのHTMLファイルで作成してください。シンプルなファイルアップロードボタン(模擬進捗)と、500msごとにEventSourceで更新されるプログレスバーを配置。各ステップ(「接続中...」「アップロード中... 20%」「処理中...」「完了!」)のステータスメッセージも表示。ダークUIにネオンカラーをアクセントに。プログレスバーにはGSAPで小さなアニメーションを追加。依存はSwiper不要、GSAPをCDNから、Vue/React不使用。SSEはバックエンドなしで動作するよう、JS内でモックのインターバルで代用。ブラウザで完全に動作すること。
このデモは、バックエンドなしでServer-Sent Events(SSE)を使ったリアルなアップロード進捗表示を実現します。ファイル選択をトリガーに模擬SSEストリームが起動し、500msごとにプログレスバーとステータスを更新。GSAPでバーに微アニメーションを追加し、ダークネオンUIで視認性も高い。SSEの学習やダッシュボードへの組み込みに最適です。
このプロンプトは役に立ちましたか?
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選