コピペOK【HTMLとCSSのみ】ローディングアニメシーション 10選

See the Pen 回転する円 by techcode sample (@techcode-sample) on CodePen.

See the Pen ディスク状のローディング by techcode sample (@techcode-sample) on CodePen.

See the Pen 四角形の跳ねるアニメーション by techcode sample (@techcode-sample) on CodePen.

See the Pen ドットが左右に動く by techcode sample (@techcode-sample) on CodePen.

See the Pen 跳ねるボール by techcode sample (@techcode-sample) on CodePen.

See the Pen 脈打つリング by techcode sample (@techcode-sample) on CodePen.

See the Pen ローディングバー by techcode sample (@techcode-sample) on CodePen.

See the Pen 点が回転するローディング by techcode sample (@techcode-sample) on CodePen.

See the Pen 時計の針のような回転 by techcode sample (@techcode-sample) on CodePen.

See the Pen 波動エフェクト by techcode sample (@techcode-sample) on CodePen.

最後におまけ -Javascript使用バージョン-

See the Pen Loading Animation by techcode sample (@techcode-sample) on CodePen.

解説

1. HTML:
   • #loadingというIDを持つ要素がローディング画面のコンテナです。#contentという要素はページの本来のコンテンツで、最初はdisplay: none;で非表示にしています。
2. CSS:
   • ローディング画面が中央に表示されるように、display: flexを使ってページ全体にセンタリングしています。
   • コンテンツが表示されると、シンプルなデザインで配置されます。
3. JavaScript:
   • ページが読み込まれた際にDOMContentLoadedイベントを利用し、ローディングアニメーションを開始します。
   • progress変数を使って0％から100％までの進行を制御します。50ミリ秒ごとに1％ずつ増加し、100％に到達するとclearIntervalでインターバルを停止し、ローディング画面を非表示にしてコンテンツを表示します。

調整方法

• 50の数値はインターバル（進行速度）を示しています。読み込みの速さに応じてこの数値を調整することで、実際のロード時間とアニメーションを同期させることができます。

これで、ページが読み込まれる際に0％から100％までのローディングアニメーションが表示され、完了するとページが開く動作が実現できます。