STUDIOでローディング風画面を実装する方法
この記事の要約
STUDIOのアニメーションと埋め込みコードを組み合わせることで、中心で縁がくるくる回るローディング画面風の実装をすることができるのでご紹介します！
STUDIOのアニメーションと埋め込みコードを組み合わせることで、中心で縁がくるくる回るローディング画面風の実装をすることができるのでご紹介します！
※今回は、実際のローディング時間ではなく、自分で設定した時間分ローディング画面が出現するという点で、「ローディング風」としています。
①ローディング中の背景boxをSTUDIOで作る
①-1 boxを作る
まず、base直下に背景BOXを作ります。
その際の設定は以下のようにします。
【通常時】
- 塗り 背景色にしたい色（今回は#111を指定）
- 横幅100％ 縦幅100vh
- 不透明度 0
【出現時】
- 不透明度1
- 時間1000 遅延2500（ローディングアニメーションの時間）
①-2 親ボックスを作る
先ほど作ったBOXをグループ化して、親BOXを設定します。
親ボックスの設定は以下のようにします。
【通常時】
- 配置 固定
- 横幅100％ 縦幅100vh
- 重ね順-3
【出現時】
- 重ね順5
- 時間0 遅延3500（ローディングアニメーションの時間と合わせる）
※親ボックスを作る理由は、画面が消えたときに重ね順を下に持ってこないと、コンテンツ中のリンクなどが触れなくなってしまうためです。
出現したら3.5秒待ち、重ね順がマイナスになるよう設定しました。
これで、ローディング画面の背景とアニメーションの実装が完成です！
②ローディング中に出てくる要素を実装する
※前段階でローディング画面の設定をしたことで背景が表示されなくなっているため、一旦以下のように設定し、後で元に戻すとわかりやすく進めることができます！
- 親ボックス：重ね順5
- 背景ボックス：不透明度1
②-1 ぐるぐる回るオブジェクトのもとを作る
先ほど作ったboxの中に、divを置きます。
大きさはここで指定した物が適用されます。
今回は縦横60pxの円を作ります。塗りはなしにします。
この後縁の下に「LOADING」というテキストを入れるため、下にマージンをつけておきました。
そのdivにidを付けます。今回は#loaderにします。
②-2 テキストボックスを作る
「LOADING」というテキストを入れたいため、#loaderの下にテキストボックスを挿入し、スタイルを調整します。
今回はこのようなスタイルに設定しました。
②-3 ぐるぐる回るオブジェクトを実装する
左パネルの「追加」から「Blank」を選択し挿入します。
iframeのboxは高さと幅を0にしておきます。
右パネルの埋め込みコードの部分に、くるくるオブジェクトのスタイルと動きを指定するCSSを書きます。
今回は
<style>
#loader {
border: 1.64px solid #333;
border-radius: 50%;
border-top: 1.64px solid #fff;
animation: spin 1s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
こちらのコードを埋め込みました。
②-4 プレビューで確認する
ライブプレビューを確認し、くるくるがうまく回っていたら成功です！
③完成！！
これで完成です。
背景色やオブジェクトのスタイル、回転の速さなど、カスタムしてサイト内に組み込んでみてください！