初めに
- サイズの大きな画像を多用すると読み込みに時間がかかるものです。そのため読み込みが終わるまでレイアウト崩れが発生してしまいます。そこでとりあえず読み込みが終わるまでローディング画面を表示する方法です。
- 「今ページを読み込んでるよ～」ということが伝わるような演出が必要になりますが、今回はシンプルなローディングアイコンを作りました。
コード
HTML
<divid="loading"><divclass="base"><span></span>
// spanタグを計8個
</div></div>CSS(SCSS)
#loading{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background-color:#333;}.base{position:relative;width:50px;height:50px;animation-name:loading-animation;animation-duration:0.5s;animation-timing-function:steps(8,start);animation-iteration-count:infinite;@keyframesloading-animation{to{transform:rotate(360deg);}}}span{position:absolute;top:calc(50%-5px);left:50%;display:block;width:40px;height:10px;transform-origin:left;&::after{content:'';display:block;width:15px;height:15px;margin-left:auto;background-color:#fff;border-radius:50%;}@for$ifrom1through8{&:nth-of-type(#{$i}){transform:rotate(45deg*$i);&::after{opacity:0.125*$i;}}}}- ベースとなる
baseクラスを付与したdivタグに絶対位置で指定したspanタグの疑似要素でローディングアイコンの丸を作っています。 - それぞれの
spanタグに回転（360°÷8個=45°）させて丸を配置し、それぞれの透明度を8段階に設定します。 - 最後に
baseクラスをアニメーションでぐるぐる回転させて、stepsでコマ送りに切り替えます。
See the Pen Loading Icon(Dot) by mimihokuro (@mimi_hokuro) on CodePen.
最後に
- 今回のローディングアイコンは疑似要素を使ったものですが、疑似要素なしで絶対配置でやってもいいと思います。
- でも絶対配置だと配置の計算が面倒なのと、ローディングアイコンの大きさを変えたいときにはこれなら再利用性はいいかなと思っています。（個人的意見）
- もっと簡単な方法があればぜひ教えてください。(_ _)