砂時計回転ローダー
砂時計回転ローダーは、砂時計シンボルが半回転して「処理中」を伝えるシンプルな表現です。実装はテキストとして置いた砂時計記号に transform:rotate を 0 度から 180 度へ往復させる @keyframes を掛けているだけで、JavaScript も画像も使いません。
解説
砂時計回転ローダーは、砂時計シンボルが半回転して「処理中」を伝えるシンプルな表現です。実装はテキストとして置いた砂時計記号に transform:rotate を 0 度から 180 度へ往復させる @keyframes を掛けているだけで、JavaScript も画像も使いません。ease-in-out のイージングにより、ひっくり返す動きにゆったりとした緩急が付きます。記号自体の見え方は端末の絵文字フォントに依存します。
使う場面と注意
レトロで可愛い印象が出るため、カジュアルなツールやゲーム的な UI、子ども向けサイトの待機表示に向きます。サイズは font-size で変えられ、回転速度は animation の秒数で調整します。色を厳密に統一したい場合や OS で見た目を揃えたい場合は、絵文字ではなくインライン SVG に置き換えると安定します。
- 大きさは
font-size、速さは秒数 - 連続回転にしたいなら 0→360 度に変更
- 絵文字依存を避けるなら SVG アイコン化を検討
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
色を自由に変えられますか。
絵文字記号を使っているため、色は端末の絵文字フォントに依存して自由には変えられません。任意の色にしたい場合は、同じ形のインライン SVG に差し替えて fill で色指定するのが確実です。
端末によって見た目が違うのはなぜですか。
砂時計記号の描画が OS の絵文字フォントに依存するためです。見た目を全環境で統一したい場合は SVG アイコンに置き換えてください。