【簡単】Studioでローディング風アニメーションを作成する方法

2025年4月1日

梶本直希

サイトを開くときに「LOADING…」という文言とグルグル回るアニメーションがあると本格的なサイトに見えますよね。

今回は、Studioでローディング風アニメーションを作成する方法を解説します。

完成イメージは下記のとおりです。

「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。

ローディング風アニメーションの対象プラン

料金プラン	実現可否
Free（無料プラン）
Mini
Personal
Business
Business Plus

ローディング風アニメーションは全プランで実装可能です！

Kaji

もちろん無料プランでも実装できます！

しかし、実装難易度は少し高いです。手順を飛ばさずにゆっくり進めていくようにしましょう！

ローディング風アニメーションを作成する方法

ローディング風アニメーションを作成する手順は、下記のとおりです。

ローディング風アニメーションを作成する方法

1つ目のボックスを用意する
親ボックスを用意する
ローディング要素を作成する

合計16枚の画像・動画を用いて、より詳しく説明していきます。

①：1つ目のボックスを用意する

まず、base直下に1つ目のボックスを用意します。

ボックスの塗り・横幅・縦幅・不透明度を変更していきます。

・塗り：LOADING画面の背景色
・横幅：100%
・縦幅：100vh
・不透明度：0

次に、出現時の不透明度やアニメーションも変更していきます。

先ほどのボックスを選択している状態で、条件付きスタイルを「出現時」に変更します。

そして不透明度、時間、遅延を変更します。

・不透明度：1
・時間：1000
・遅延：2000

②：親ボックスを用意する

まず、先ほど作ったボックスをグループ化します。

Kaji

ボックスを選択した状態で、Macなら「⌘+G」、Windowsなら「Ctrl+G」を押すとグループ化できます！

グループ化した時にできた親ボックスに対して、以下の設定を行います。

・配置：固定
・重ね順：-3
・横幅：100%
・縦幅：100vh

またグループ化した時にできた親ボックスに対して、出現時の設定も変えていきます。

・重ね順：5
・時間：0
・縦幅：2000

これで下準備は完了です！

一度ライブプレビューで確認してみてください！下記のように2秒経てば、画面がサッと変わるようになっているはずです。

③：ローディング要素を作成する

次はローディング要素を作っていきますが、その前に一度設定を戻しておくことをおすすめします！

	変更前	変更後
親ボックス	重ね順：-3	重ね順：5
子ボックス	不透明度：0	不透明度：1

上記のように設定したら、実際にローディング要素を作成していきます。

子ボックスの中に、ボックスを追加します。

ボックスの形を正円に変更します。「縦幅：70px」、「横幅：70px」、「角丸：50%」で設定します。また今回は画像が見えやすいように塗りを付けていますが、塗りは透明にしておくのがおすすめです！

Kaji

塗りを透明にすることで、ローディングが本格的に見えます！

正円の下に「LOADING…」というテキストを入れたいので、マージンを付け加えておきましょう。

また正円にidを付けておきます。正円を選択しながら、右メニューを開いて、ID欄に「loader」と入力しておきましょう。

正円の下にテキストを配置して、「NOW LOADING」と入力します。

次は、テキストの下にBlankのボックスを追加します。

Blankのボックスは「横幅：0px」、「縦幅：0px」に変更しておきます。

そしてBlankのボックスを選択しながら、右メニューの埋め込みコード欄に下記を貼り付けます。

<style>
#loader {
  border: 1.5px solid #333;
  border-radius: 50%;
  border-top: 1.5px solid #fff;  
 animation: spin 2s linear infinite; 
}
  
@keyframes spin{
  0%{
    transform: rotate(0deg); 
  }
  100%{
    transform: rotate(360deg);　
  }
}
</style>