ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフレンドリーなパフォーマンスです。応答コンテンツがページにレンダリングされると、アニメーションは削除されます。 まずローディング効果の写真を載せます 原理:擬似クラス+アニメーション。以下はステップバイステップの図で、理解を助けるために掲載されています。ローディングアニメーションの本質は、幅と高さが固定された正方形を設定し、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をインストールする方法
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...
Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...
CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...
一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...
ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...
いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...
コンテンツ詳細タグ: <h1>~<h6>タイトルタグ<pre>テ...
1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...
CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...
目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...
免責事項:プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...
1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...
この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...