タスクの道筋 / 入力から結果へ
CSS ローダーをデザインする方法
- 01
ローダースタイルを選ぶ
「ローダースタイル」を開き、定番の回転リングなら「オービットリング」、跳ねる 3 つのドットなら「3 ドット」を選びます。ライブプレビューは変更のたびにすぐアニメーションし、各スタイルは書き出し時に専用の @keyframes を伴います。
- 02
フレームとストロークのサイズを決める
フレームは 24〜160 px、線やドットは 2〜20 px です。リングの線はフレームの半分未満にしてください。3 つのドットと各 2 px 以上の間隔が収まらない場合、コピーとダウンロードは無効になります。リングの出力寸法には境界線を含みます。
- 03
速度と色を調整する
「サイクル時間」を 0.2〜4 秒の間で 0.05 秒刻みで選びます。「アクティブカラー」はリングの上辺または中央のドットに、「トラックカラー」はリングの残りの部分または左右のドットに適用されます。遅いサイクルは落ち着いたバックグラウンド処理に、速いサイクルは緊急性のある印象になります。
- 04
サンプルから始めることもできる
「サンプルを読み込む」を押すと、大胆な「3 ドット」プリセット（72 px フレーム、12 px ドット、0.75 秒サイクル、赤と黄）が出発点として適用されます。「リセット」はいつでもデフォルトのオービットリングに戻します。
- 05
CSS をコピーまたはダウンロードする
「CSS をコピー」でルールセットをクリップボードに入れるか、「.css をダウンロード」で toolars-loader.css を保存します。出力パネルには書き出すバイト数が正確に表示され、いずれかの値が検証を通らない間は両方のボタンが無効のままです。
- 06
マークアップに組み込む
「オービットリング」は .loader クラスを付けた要素 1 つで、「3 ドット」はその内側に 3 つの span 子要素が必要です。出力には prefers-reduced-motion のブロックが含まれ、動きに敏感な訪問者にはアニメーションが止まります。