CSSでローディングをスタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ローディング処理のスタイリングについて学びました。

demoは、「こちら」で確認できます。

JavaScript版

ワークスペース

必要なファイルは、以下の通りです。

HTML&JavaScript

このHTMLをブラウザ上で表示すると以下のようになります。

スタイリング

先ほど作成したページにスタイルをつけていきます。

なお、項目のbgやbodyは、HTMLの要素です。

全体のスタイル

全体に適用するスタイルを定義します。

bg

bgのスタイリングをします。

body

bodyのスタイリングをします。

loading-text

loading-textのスタイリングをします。

ページをリロードするとローディングテキストがスタイリングされたことがわかります。

これで、完成です。

おわりに

flexを使ったページの中央配置についてはだんだん慣れてきましたが、バックグランド画像のプロパティ設定は少し難しく感じました。これは慣れていくしかないか^^;

そろそろ気合の入ったオリジナルアプリでも作りましょうかね^^

それでは、また!

CSSまとめ

CSS ソースコード

コメントを残す