【vue.js & element plus】ページ読み込み時のくるくる回るローディング画面の作成

投稿：2025/05/22｜ 更新： 2025/05/22 ｜ 3464文字

今回は、最近よく使っているvue.js & element plusをつかって、ページ読み込み時のくるくる回るローディング画面を作ってみたいと思います。このフレームワークでも調べると、いろいろなことができることがわかります。さっそく、パラメータやコード・動作サンプルを確認していきましょう。

1 element plusローディングのドキュメントは？
2 vue.js & element plusローディング画面　コードとポイント
3 vue.js & element plusローディング画面　表示例
4 あとがき・まとめ

element plusローディングのドキュメントは？

element plusのサイト上にもローディングのドキュメントはありました。ただし全部英語です。また、TypeScript や拡張子vueのファイル内にtemplateとして書いてあったりするので(コマンド叩いて環境構築してるような場合は気になりませんが)、直接htmlで構築したページに、ちょっと使ってみようというときにはわかりにくいかも。

そいういうわけで今回もhtml&javascriptでやってみます。そのほか表示に関わるパラメータもあるので、使いそうなものの説明もつけてみました。データ型もつけてて、booleanはtrue/false、stringは文字列で記載します(中にはHTMLElement型のもの、Function型のものもあるようです)。

fullscreen (フルスクリーン)	boolean (Default：false)
lock (画面ロック。true背景操作不可)	boolean (Default：false)
text (ローディング時テキスト)	string (Default：なし)
background (背景色)	string (Default：なし)
customClass (カスタムクラス名)	string (Default：なし)

後述しますが、今回はlock，text，backgroundあたりを使っていきます。（英語ですけど）公式ドキュメントも確認してみてください。

Loading（element plus）
https://element-plus.org/en-US/component/loading.html

vue.js & element plusローディング画面　コードとポイント

コードはこんな感じになりました。CSSなどで直接関係ない部分は省略してます。cdnでロードしているスクリプトは『element-plus/dist/index.css，vue@3，element-plusの３つ』です。ローディングをマウントするid要素として『div id="appLoading"』をつけておきました。CSSのところからみていきますか。

body, html {overflow-x: hidden;}
#appLoading {opacity: 0; transition: 2.5s ease;}
#appLoading.loaded {opacity: 1;}

#appLoadingはローディングをマウントしている要素です。ここはサイト全体を囲んでいて、最初はopacity:0（透明）で、transition: 2.5sは2.5秒で変化です。『#appLoading.loadedは、ローディングが終わった時loadedがセットされる・opacity:1で不透明になる・見える』という感じ。overflow-x: hidden;は、ローディング終了時に、横に少しカクッと動くのを避けるために入れました。
次はjavascript部分見ていきますね。まずは・・・

const { createApp, onMounted } = Vue;
const { ElLoading } = ElementPlus;

VueからcreateApp・onMounted、ElementPlusからElLoadingといった搭載ファンクションを呼び出します。vue2のときはcreateAppじゃなくて『new Vue』でしたね。

const loadingInstance = ElLoading.service({
    lock: true,
    text: 'Now loading…',
    background: 'rgba(255, 255, 255, 1.0)',
});

そして、ローディング機能のインスタンスを設定。lock，text，backgroundはここで使いました。『画面ロック・Now loading…テキスト表示・背景白』という設定です。

const App = {
setup() {return {};}
};

Appは実際の処理がないので、省略できます。このブロックを省略するときはcreateApp()と書きます。const Appが無いのにcreateApp(App)と書いてしまうと参照できなくてエラーになります。

window.addEventListener('load', () => {
  setTimeout(() => {
    if (loadingInstance) loadingInstance.close();
    document.getElementById(‘appLoading’).classList.add('loaded');
  }, 3000);
});

次のブロックですが、サンプルサイトが軽すぎてすぐロードが終わるのでsetTimeoutで３秒遅らせています。また、window.addEventListenerのloadのほうがDOMContentLoadedより後に発火するそうです（domツリーより後になる）。
loadingInstanceをcloseして、document.getElementByIdでid要素のappLoading取得してクラスにloadedつける、という処理になります。

createApp(App).use(ElementPlus).mount('#appLoading');

で、最後にvueアプリ作成・ElementPlusを使えるように・id要素のappLoadingにマウントして完了です。