【Bubble】ページ読込み完了まで、ロード中アニメーションを流す方法
Webページを表示する時、Bubbleで構築したそのままでは、読み込んだ情報から順に表示されていきます。
まずテキスト、次にボタン、最後にデータ量の大きな画像…と。
これではやや不格好ですね。
情報が全て読み込まれてから、同時にバン!と表示する。
そして読込み中は、ロード中と分かるようにアニメーションを流す。
今回はその方法を解説します。
Page loaded(entire)を活用
WorkflowやConditionalの条件式に、Page loaded(entire)があります。
これは「ページ全体が読込み完了したら」という意味です。
これを使って、次のように設定します。
ページ全体をグループ化(Group TopPage)し、Conditionalを設定します。
「ページ全体の読込みが未完了ならば、Group TopPageを非表示にする」
という設定です。
読込みが完了すれば、この条件は当てはまらなくなるので、Group TopPageは表示されます。
ロード中アニメーションを追加
ここまでの設定では、非表示の間は画面が真っ白です。
これでは「ページが重い」「バグっている」と思われてしまいます。
そこで、ロード中アニメーションを追加します。
アニメーションはプラグインで「Load」などと調べるといくつも出てきます。
また、任意のGIFファイルを設置することも可能です。
今回は下記プラグインを使用します。
Animated Loaders
https://bubble.io/plugin/animated-loaders-1553729425930x287123392710311940
いくつかアニメーションのエレメントが追加されました。
好きなものをページの真ん中に配置します。
注意点として、先ほどのグループに入れてはいけません。
一緒に非表示になってしまうからです。
画像のElements treeを見ての通り、グループと分けて配置します。
これでプレビューすると、ロード中アニメーションが動いてる後に、ページが表示されたと思います!
まとめ
今回の題材は細かい部分ですが、ユーザーの最初の印象が大きく変わる部分になります。
応用してWorkflowに設定すれば、アニメーションでページを表示することも可能です。
より見た目の美しいWebサイトに仕上げましょう!
この記事が気に入ったらサポートをしてみませんか?