ギフプロギフプロ

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

見る
ホームヘルプ