％カウントアップローダー
％カウントアップローダーは、0% から 100% へ数字が増えていく初回ロード演出です。表示は setInterval を使った JavaScript で、約 40 ミリ秒ごとに数値を 1 ずつ進め、 pct-load__num のテキストを書き換えます。100 に達すると 0 に戻り、ループします。
解説
％カウントアップローダーは、0% から 100% へ数字が増えていく初回ロード演出です。表示は setInterval を使った JavaScript で、約 40 ミリ秒ごとに数値を 1 ずつ進め、pct-load__num のテキストを書き換えます。100 に達すると 0 に戻り、ループします。数字には font-variant-numeric:tabular-nums が当たっているため桁が変わっても横幅が揺れず、カウント中に文字がガタつきません。
実ロードに連動させるには
スプラッシュ画面、ゲームやアプリの初回ロード、重い素材の読み込み中表示に向きます。このスニペットは演出として一定速度で回りますが、実際の読み込み進捗に合わせたい場合は、ループを止めて progress イベントや読み込み済み件数から % を計算して代入します。完了時はタイマーを clearInterval で止め、ローダーを隠します。
- 速さは
setIntervalの間隔値 - 色や桁揃えは
colorとtabular-nums - 完了後の後片付け（タイマー停止・非表示）を忘れない
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
JavaScript なしでも動きますか。
動きません。数字を 1 ずつ増やす処理は setInterval による JavaScript で行っています。CSS だけでは任意の数値テキストを更新できないため、このローダーには JS が必須です。
実際の読み込み進捗に合わせられますか。
合わせられます。一定速度のループをやめ、読み込み済みの割合を計算して数値に代入する形に変えます。完了時は clearInterval でタイマーを止め、表示を消してください。