ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフレンドリーなパフォーマンスです。応答コンテンツがページにレンダリングされると、アニメーションは削除されます。 まずローディング効果の写真を載せます 原理:擬似クラス+アニメーション。以下はステップバイステップの図で、理解を助けるために掲載されています。ローディングアニメーションの本質は、幅と高さが固定された正方形を設定し、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をインストールする方法
この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...
最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...
環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...
Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...
原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...
この記事の例では、グラフィック検証コードを実装するためのVueの具体的なコードを参考までに共有してい...
1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...
目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...
mysql5.7.17無料インストールバージョンのインストールに関する最近の経験1.ダウンロードして...
説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...
Centos マシンで docker のインストールが完了したら、docker info コマンドを...
#include <linux/moduleparam.h> 1. モジュールパラメータ...
自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...