🌀
OutSystemsでアイコンを回転させてローディング中表示をする
OutSystemsでローディング中であることを、回転するアイコンで表示したいと思いその方法をまとめておきます。
やりたいこと
OutSystemsでローディング中（読込中や処理中）であることをわかりやすく表示させたいと思います。単純にLoading...とテキスト表示してもよいのですが、動きがないと画面が固まっているのと区別できないので、回転するアイコンを表示したいと思います。
回転するアイコンを表示する
アイコンを回転させるにはCSSクラスを付与するだけで大丈夫です。
まずはアイコンを表示させます。
iconをドラッグ＆ドロップします。
ローディング表示用に今回はspinnerを使いたいと思います。
テキストも追加して、次のような見た目にしておきます。
回転表示させるCSSクラスを付与
アイコンを回転表示させるにはfa-spinクラスを付与します。
ブラウザで確認すると、次のようにアイコンが回転表示されます。
まとめ
OutSystemsでローディング中をわかりやすく表示する方法を確認しました。アイコンを回転表示させるにはCSSクラスのfa-spinを付与するだけで大丈夫です。
Discussion