ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフレンドリーなパフォーマンスです。応答コンテンツがページにレンダリングされると、アニメーションは削除されます。 まずローディング効果の写真を載せます 原理:擬似クラス+アニメーション。以下はステップバイステップの図で、理解を助けるために掲載されています。ローディングアニメーションの本質は、幅と高さが固定された正方形を設定し、border-radius: 50%; で円形にし、divに3pxの境界線を付けて透明に設定し、上部の境界線を個別に白に設定し、::beforeと::after擬似クラスabsoluteを使用して配置し、同じ設定を行うことです。違いは、左のギャップを順番に増やし、アニメーションの実行時間が長くなり、遅延が設定されることで、円が異なる速度で回転できるようになります。 完全なコード: コンポーネントフォルダ内のloading.vue <テンプレート> <div id="loader_wrapper"> <div id="loader"></div> <div class="load_title">読み込み中、お待ちください......</div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:"読み込み中", } </スクリプト> <スタイルスコープ> #ローダーラッパー{ 位置: 固定; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; zインデックス: 99; 背景: rgba(0, 0, 0,.8); 背景サイズ: 100% 100%; } #ローダ{ 表示: ブロック; 位置: 相対的; 左: 50%; 上位: 50%; 幅: 300ピクセル; 高さ: 300px; /* 背景: 赤; */ マージン: -150px 0 0 -150px; 境界線の半径: 50%; 境界線: 3px 透明実線; 上の境界線の色: #fff; -webkit-animation: 5 秒間直線的に無限にスピンします。 -ms-animation: 5秒間直線的に無限スピン; -moz-animation: スピン 5 秒 線形 無限; -o-animation : 5秒間、直線的に無限回転します。 アニメーション:スピン 5 秒 線形 無限; zインデックス: 1001; } #ローダー:前{ コンテンツ:""; 位置: 絶対; 上: 5px; 左: 5px; 右: 5px; 下: 5px; 境界線の半径: 50%; /* 背景: 緑; */ 境界線: 3px 透明実線; 上の境界線の色: #fff; -webkit-animation: スピン 8 秒 線形 無限; -ms-animation: 8 秒間直線的に無限スピンします。 -moz-animation: スピン 8 秒 線形 無限; -o-animation : 8秒間線形無限スピン; アニメーション:スピン 8 秒 線形 無限; } #ローダー:後{ コンテンツ:""; 位置: 絶対; 上: 15px; 左: 15px; 右: 15px; 下: 15px; 境界線の半径: 50%; /* 背景: 黄色; */ 境界線: 3px 透明実線; 上の境界線の色: #fff; -webkit-animation: スピン 8 秒、線形 1 秒、無限; -ms-animation: スピン 8 秒、線形 1 秒、無限; -moz-animation: スピン 8 秒、線形 1 秒、無限; -o-animation : スピン 8 秒、線形 1 秒、無限; アニメーション:スピン 8 秒 線形 1 秒 無限; } @-webkit-keyframes スピン { 0%{ -webkit-transform: 回転(0度); -ms-transform:回転(0度); 変換:回転(0度); } 100%{ -webkit-transform: 回転(360度)。 -ms-transform:回転(360度); 変換: 回転(360度); } } @keyframes スピン{ 0%{ -webkit-transform: 回転(0度); -ms-transform:回転(0度); 変換:回転(0度); } 100%{ -webkit-transform: 回転(360度)。 -ms-transform:回転(360度); 変換: 回転(360度); } } #loader_wrapper .load_title{ フォントファミリ: "Open Sans"; 色:#fff; フォントサイズ: .3rem; 幅: 100%; テキスト配置: 中央; zインデックス: 9999; 位置: 絶対; 上位:70% 不透明度: 1; 行の高さ: .3rem; } </スタイル> cs.vueページで読み込みを導入して登録する csvue の <テンプレート> <div class="main"> <v-if="!initFlag" をロード中></ロード中> 111 </div> </テンプレート> <スクリプト> 「../components/loading」からロードをインポートします。 エクスポートデフォルト{ 名前:"トランニン", データ () { 戻る { initFlag:false, // グローバル データを初期化する要求 false は要求が失敗したことを意味します} }, コンポーネント:{ 読み込み中、 } } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Dockerを使用してJenkinsをインストールする方法
この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹...
目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...
今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...
Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
1. ローカルyumソースを設定する1. ISOイメージをマウントする マウント -o loop /...
目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...
序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...
目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...
1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....
この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...
失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...