ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフレンドリーなパフォーマンスです。応答コンテンツがページにレンダリングされると、アニメーションは削除されます。 まずローディング効果の写真を載せます 原理:擬似クラス+アニメーション。以下はステップバイステップの図で、理解を助けるために掲載されています。ローディングアニメーションの本質は、幅と高さが固定された正方形を設定し、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をインストールする方法
目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...
Docker コンテナに入った後、コンテナを終了すると、コンテナは Exited 状態に変わります。...
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
目次背景: Nginx スムーズ アップグレード ソリューションフォールバック手順要約する背景:負荷...
クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...
注: このデモはミニプログラム環境でテストされており、他の h5 および pc Web ページにも適...
この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
目次1. 主キーが存在する2. 主キーはないが、一意のインデックスが存在する3. 共同主キーまたは共...
目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...
目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...
ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...
次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...
1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...