カレンダー & ステップ

カレンダー & ステップに分類されるWeb表現技法10件。ミニアジェンダ、進捗バー、ステップインジケータ、セグメント進捗など。ライブデモとコピーできるコード付き。

本日、2026年7月15日の予定を時刻順に並べ、カテゴリごとに色分けした帯とチェックで完了・未完了を切り替えられる、シンプルなミニアジェンダです。

0%から100%まで一定速度で満ちる決定的な進捗バー。進捗のしきい値ごとに色が変化し、縞模様が流れ続けて完了までの見通しを伝えます。

1→2→3→4の水平ステップを完了・現在・未完で色分けし、接続線が進むごとに満ちていく進行状況の表示。次へ/戻るで手動操作もできます。

インスタのストーリーズのように分割バーが1本ずつ自動で満ちて次のシーンへ進み、最後まで来ると最初からループする進捗表示です。

2026年7月を起点に前月・翌月へ移動でき、今日を淡いリングで示しつつ日付をクリックして選択できる、標準的な7列グリッドの月間カレンダーです。

入力欄をクリックするとカレンダーがふわりとポップし、日付を選ぶと入力欄に反映されて閉じます。外側クリックでも自然に閉じる予約フォーム向けの部品です。

日付の下に予定の色つきドットが並び、クリックすると下部にその日の予定一覧が時刻付きで表示される、仕事・プライベート・健康を色分けしたイベントカレンダーです。

SVGのリングをstroke-dashoffsetで描画し、中央の数値が進捗と同期してカウントアップする円形プログレス。完了後は自動でループします。

複数ファイルの進捗を行ごとに表示し、擬似的な失敗が起きた行は自動と手動のどちらでも再試行できるアップロード進捗パネルです。

開始日と終了日を2回クリックして選ぶと、範囲全体が帯状にハイライトされ、宿泊日数や期間の長さが自動で表示される上級者向けの日付選択部品です。