React-DOMのレンダリング中に読み込み画面を表示しますか？

150

これは、Google Adsenseアプリケーションページの例です。メインページの前に表示されるロード画面が後に表示されます。

ここに画像の説明を入力してください

Reactで同じことを行う方法がわかりません。Reactコンポーネントによってレンダリングされたロード画面を作成すると、ページがロードされている間は、DOMがレンダリングされるまで待機する必要があるため表示されません。

更新：

私は、スクリーンローダーを配置index.htmlしてReact componentDidMount()ライフサイクルメソッドで削除することで、私のアプローチの例を作成しました。

例とreact-loading-screen。

reactjs  asynchronous  redux 
— タン・グエン
ソース
プレーンなjsで表示するものを表示し、reactがマウントされたら非表示にするか、DOMから削除します。あなたがする必要があるのは、反応コードからそれを隠すことです。
— FurkanO 2016
これは単に素晴らしいです！ありがとうございました。
— Arman Karimi

回答:

100

これは、htmlファイル（exの場合はindex.html）に読み込みアイコンを配置することで実行できます。これにより、htmlファイルが読み込まれた直後にユーザーにアイコンが表示されます。

アプリの読み込みが完了したら、その読み込みアイコンをライフサイクルフックで簡単に削除できますcomponentDidMount。通常はで削除します。

— kkkkkkk
ソース
11
ルートコンポーネントをそのアイコンの親ノードにマウントする場合は、手動で削除する必要もありません。Reactはマウントノードの子をクリーンアップし、代わりに独自に新しくレンダリングされたDOMをそこに配置します。
— リシャット16
6
私はアイコンをReactアプリのルートノード内に配置していません。それは私にとって適切ではないと感じています
— kkkkkkk
171

目標

HTMLページがレンダリングされたら、すぐに（Reactのロード中に）スピナーを表示し、Reactの準備ができたら非表示にします。

スピナーは純粋なHTML / CSS（Reactドメイン外）でレンダリングされるため、Reactは表示/非表示プロセスを直接制御するべきではなく、実装はReactに対して透過的である必要があります。

解決策1-：empty疑似クラス

反応をDOMコンテナーにレンダリングするので<div id="app"></div>、スピナーをそのコンテナーに追加できます。反応が読み込まれてレンダリングされると、スピナーは消えます。

React ReactDOM.render()は呼び出されるとすぐにコンテナーのコンテンツを置き換えるため、reactルート内にDOM要素（たとえばdiv）を追加することはできません。レンダリングしてもnull、コンテンツはコメントに置き換えられます- <!-- react-empty: 1 -->。つまり、メインコンポーネントのマウント中にローダーを表示したい場合、データは読み込まれますが、実際には何もレンダリングされ<div id="app"><div class="loader"></div></div>ない場合、コンテナー内に配置されたローダーマークアップ（たとえば）は機能しません。

回避策は、スピナークラスを反応コンテナーに追加し、:empty疑似クラスを使用することです。コンテナに何もレンダリングされない限り、スピナーは表示されます（コメントはカウントされません）。reactがコメント以外のものをレンダリングするとすぐに、ローダーは消えます。

例1

この例では、null準備ができるまでレンダリングするコンポーネントを確認できます。コンテナもローダーです- <div id="app" class="app"></div>、そしてローダーのクラスはそれがそうである場合にのみ機能:emptyします（コードのコメントを参照）：

コードスニペットを表示

例2

:empty疑似クラスを使用してセレクターを表示/非表示にするバリエーションは、スピナーを兄弟要素としてアプリコンテナーに設定し、隣接する兄弟コンビネーター（+）を使用してコンテナーが空である限りそれを表示します。

コードスニペットを表示

解決策2-スピナーの「ハンドラー」を小道具として渡す

スピナーの表示状態をより細かく制御するには、2つの関数showSpinnerとを作成hideSpinnerし、それらをプロップを介してルートコンテナーに渡します。関数はDOMを操作したり、スピナーを制御するために必要なことを何でも行うことができます。このように、Reactは「外の世界」を意識せず、DOMを直接制御する必要もありません。テスト用の関数を簡単に置き換えたり、ロジックを変更する必要がある場合は、Reactツリーの他のコンポーネントにそれらを渡すことができます。

例1

コードスニペットを表示

例2-フック

この例では、useEffectコンポーネントのマウント後に、フックを使用してスピナーを非表示にします。

コードスニペットを表示

— オリ・ドロリ
ソース
最後の2つのコードセクションがどこにあるべきかを明確にできますか？1つ目は明らかに、reactコンポーネントのjavascript srcファイルにあり、3つ目は、htmlテンプレートに記述され、jsファイルによってレンダリングされると思いますが、2つ目はどこに行くのでしょうか。
— levraininjaneer
1
2つ目はCSSです。私はグローバルCSSを使用しましたが、CSSモジュールまたはJSのCSSを使用できます。3番目はHTMLファイルで、必要に応じてスピナーマークアップを含めることができます（2番目の例）。
— Ori Drori
パフォーマンスを考慮すると、このタイムアウトは適切ではありません。
— ドライリーフ
4
@dryleaf-setTimeoutはソリューションの一部ではありません。これは、コンテンツをレンダリングする前に非同期アクションを待機することをシミュレートします。
— Ori Drori
私は同様のアプローチを使用しています。ローダーに必要なcssファイルのキャッシュを無効にするのに役立つWebpackには何も見つかりません。手伝ってくれますか？
— hamza-jutt
40

これの回避策は次のとおりです。

あなたのレンダー関数で次のようなことをしてください：

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

isLoadingをコンストラクターでtrue、componentDidMountでfalseとして初期化します。

— Amoolya S Kumar
ソース
子コンポーネントにデータをロードするためにajaxメソッドを呼び出したとき。子コンポーネントデータが入力される前に、componentDidMountが呼び出されました。この種の問題をどのように克服するのですか？
— dush88c
2
Mountingライフサイクルの場合は問題ありません。更新ライフサイクルに何か追加しますか？
— zakir
これをすべてのページで行う必要がありますか、それともアプリエントリで行う必要がありますか
— Pedro JR
16

上記のユースケースのためのドロップイン、ゼロ設定、ゼロ依存ライブラリを探している人がいる場合は、pace.js（http://github.hubspot.com/pace/docs/welcome/）を試してください。

イベント（ajax、readyState、履歴pushstate、jsイベントループなど）に自動的にフックし、カスタマイズ可能なローダーを表示します。

リアクション/リレープロジェクトでうまく機能しました（リアクションルーターを使用してナビゲーションの変更を処理し、リクエストをリレーします） （提携していません。私たちのプロジェクトでペース.jsを使用していて、うまくいきました）

— ハフィズ・イスマイル
ソース
おい！反応でそれを使用する方法を教えてもらえますか？
— uneet7
スクリプトを添付しpublic/index.htmlてスタイルを選択するだけです。これは非常にシンプルで驚くべきプラグインです。ありがとうございました。
— PJ3
この答えがなければ、私はペースを見つけることができなかっただろう。簡単に組み込むことができ、CSSの小さな魔法といくつかのイベントアタッチメントを使用して、移行中にアプリをブロック/無効化し、スピナーをカスタマイズすることができました。
— invertedSpear
12

Reactアプリが大規模な場合、ページがロードされてから起動して実行されるまでには本当に時間がかかります。たとえば、アプリのReact部分をにマウントするとします#app。通常、index.htmlのこの要素は、単に空のdivです。

<div id="app"></div>

代わりにできることは、ページのロードとDOMへの最初のReactアプリのレンダリングの間で見栄えをよくするために、いくつかのスタイリングと一連の画像を配置することです。

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

ページが読み込まれた後、ユーザーにはすぐにindex.htmlの元のコンテンツが表示されます。その直後、Reactがレンダリングされたコンポーネントの階層全体をこのDOMノードにマウントする準備ができると、ユーザーには実際のアプリが表示されます。

注：classではありませんclassName。これをhtmlファイルに入れる必要があるからです。

SSRを使用すると、ページが読み込まれた直後に実際のアプリがユーザーに表示されるため、状況はそれほど複雑ではありません。

— リシャット
ソース
これも機能します。ロードが行われる場所が2つあります。1つは巨大なアプリです。次は準備（さまざまなコンポーネントのマウント）です。それで、app.renderが引き継ぎ、アニメーションがリセットされる（実際には置き換えられる）ため、点滅するステップが表示されます。そのフラッシュを回避する方法はありますか？ReactはDOMを1対1で比較しますか？しかし、私が理解していることから、Reactはあらゆる種類のプライベートデータをタグに追加します...
— Alexis Wilke
12

これはReactDOM.render()、ルート を制御する前に発生します<div>。つまり、アプリはその時点までマウントされていません。

したがってindex.html、ルート内のファイルにローダーを追加できます<div>。そして、Reactが引き継ぐまで画面に表示されます。

どんなローダー要素でも（svgアニメーションなどで）最適に機能するものを使用できます。

ライフサイクルメソッドで削除する必要はありません。以下のGIFで確認できるように、Reactはそのルートの 子を<div>レンダリングされた<App/>に置き換えます。

CodeSandboxの例

ここに画像の説明を入力してください

index.html

<head>
  <style>
    .svgLoader {
      animation: spin 0.5s linear infinite;
      margin: auto;
    }
    .divLoader {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="divLoader">
      <svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
        <path fill="lightblue"
          d="PATH FOR THE LOADER ICON"
        />
      </svg>
    </div>
  </div>
</body>

index.js

を使用debuggerしてReactDOM.render()実行前にページを検査します。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
— cbdeveloper
ソース
美しくエレガントなソリューション
— Gal Margalit
1
お役に立てて嬉しいです。
— cbdeveloper
9

最近では、React 16.8でもフックを使用できます。

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ spinner, setSpinner ] = useState(true);

  // It will be executed before rendering

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1000)
  }, []);

  // [] means like componentDidMount

  return !spinner && <div>Your content</div>;
};

export default App;
— マックス・カリク
ソース
5

componentDidMountでタイムアウトを設定しても機能しますが、アプリケーションでメモリリークの警告が表示されました。このようなものを試してください。

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }
— リッチコステロ
ソース
4

私は最近その問題に対処する必要があり、私にとってはうまく機能する解決策を考え出しました。ただし、上記の@Ori Droriソリューションを試してみましたが、残念ながらうまくいきませんでした（多少の遅延があり、+ setTimeout関数の使用が好きではありませんでした）。

これは私が思いついたものです：

index.html ファイル

内部 headタグ-インジケーターのスタイル：

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

今bodyのタグ：

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

次に、app.jsファイル内（レンダー関数内）の非常にシンプルなロジックが表示されます。

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

それはどのように機能しますか？

最初のコンポーネント（私のアプリでapp.jsはほとんどの場合同様です）が正しくマウントspinnerされると、hidden属性が適用されて非表示になります。

追加することのより重要なこと- !spinner.hasAttribute('hidden')コンディションはhidden、すべてのコンポーネントのマウントでスピナーに属性を追加することを防ぎます。したがって、実際には、アプリ全体がロードされるときに一度だけ追加されます。

— 親切なユーザー
ソース
4

私はreact-progress-2 npmパッケージを使用しています。これは依存関係がなく、ReactJSでうまく動作します。

https://github.com/milworm/react-progress-2

インストール：

npm install react-progress-2

プロジェクトにreact-progress-2 / main.cssを含めます。

import "node_modules/react-progress-2/main.css";

含めreact-progress-2て、トップコンポーネントのどこかに配置します。次に例を示します。

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

ここで、インジケーターを表示する必要があるときはいつでもProgress.show()、たとえばを呼び出すだけです。

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

なお、してくださいshowとhideの通話が積層されているので、n型の連続したショーの呼び出しの後、あなたは何をするn個隠すコールがインジケータを非表示にするか、使用できる必要がありますProgress.hideAll()。

— アレックスザブラズニー
ソース
4

私のアプリでもReactを使用しています。私がaxiosインターセプターを使用しているリクエストの場合、ローダー画面（例を示したようにフルページ）を作成するための素晴らしい方法は、インターセプター内部のボディ（例：公式ドキュメントのカスタムコードを含むコード）にクラスまたはIDを追加することです。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
     document.body.classList.add('custom-loader');
     return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
       document.body.classList.remove('custom-loader');
       return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

そして、CSSでローダーを疑似要素で実装する（またはクラスまたはIDを別の要素に追加し、好きなように本文ではない）-背景の色を不透明または透明などに設定できます...例：

custom-loader:before {
    background: #000000;
    content: "";
    position: fixed;
    ...
}

custom-loader:after {
    background: #000000;
    content: "Loading content...";
    position: fixed;
    color: white;
    ...
}
— エイドリアン95999
ソース
3

パブリックフォルダー内のindex.htmlファイルの場所を編集します。イメージをパブリックフォルダーのindex.htmlと同じ場所にコピーします。次に、index.htmlのコンテンツの<div id="root"> </div>タグを含む部分を、以下に示すHTMLコードに置き換え ます。

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

ロードプロセス中、ページの中央にロゴが表示されます。そして、数秒後にReactによって置き換えられます。

— マグナス・メルウィン
ソース
2

これほどの労力は必要ありません。基本的な例を次に示します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    .loader-container {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    .loader {
      margin: auto;
      border: 5px dotted #dadada;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader-container">
      <div class="loader"></div>
    </div>
  </div>
</body>

</html>

あなたは遊んで、HTMLそれCSSをあなたの例のように見せることができます。

— アーメド・カマル
ソース
1

最も重要な質問は、「ロード」とはどういう意味ですか？マウントされている物理要素について話している場合、ここでの最初の答えのいくつかは素晴らしいです。ただし、アプリが最初に行うのが認証のチェックである場合、実際にロードしているのは、ユーザーが承認済みユーザーまたは未承認ユーザーにラベルを付けるCookieを渡したかどうかに関係なく、バックエンドからのデータです。

これはreduxに基づいていますが、簡単な反応状態モデルに簡単に変更できます。

アクション作成者： 

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

最後の部分は、ユーザーが認証されたかどうかを意味します。応答を受信すると、ロード画面が消えます。

これをロードするコンポーネントは次のようになります。

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

state.loadingがtrueの場合、常に読み込み画面が表示されます。componentDidMountでは、getTodos関数を呼び出します。これは、応答（エラーの可能性があります）を取得したときにstate.loadingを偽装するアクション作成者です。コンポーネントが更新され、renderが再度呼び出されます。今回は、ifステートメントのため、ロード画面はありません。

— user3605834
ソース
1

反応アプリの起動は、メインバンドルのダウンロードに基づいています。Reactアプリは、メインバンドルがブラウザーにダウンロードされた後にのみ起動します。これは、遅延読み込みアーキテクチャの場合にも当てはまります。ただし、バンドルの名前を正確に示すことはできません。「npm run build」コマンドを実行すると、webpackが各バンドルの最後にハッシュ値を追加するためです。もちろん、ハッシュ設定を変更することでそれを回避できますが、ブラウザのキャッシュデータの問題に深刻な影響を及ぼします。同じバンドル名のため、ブラウザーは新しいバージョンを取得しない場合があります。。この状況を処理するには、webpack + js + CSSアプローチが必要です。

以下のようにpublic / index.htmlを変更します

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <style>
 .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 1.1em solid rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .innerpercentage {
      font-size: 20px;
    }
  </style>
  <script>
    function showPercentage(value) {
      document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";
    }
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function (event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
        showPercentage(percentComplete)
        // ...
      } else {
        document.getElementById('percentage').innerHTML = "Loading..";
      }
    }, false);

    // load responseText into a new script element
    req.addEventListener("load", function (event) {
      var e = event.target;
      var s = document.createElement("script");
      s.innerHTML = e.responseText;
      document.documentElement.appendChild(s);
      document.getElementById('parentDiv').style.display = 'none';

    }, false);

    var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";
    req.open("GET", bundleName);
    req.send();

  </script>
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

  <title>App Name</title>
  <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="parentDiv" class="percentage">
    <div id="percentage" class="innerpercentage">loading</div>
  </div>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>
スニペットを展開

本番環境のWebpack構成で、HtmlWebpackPluginオプションを以下に変更します

 new HtmlWebpackPlugin({
          inject: false,
...

構成ファイルを取得するには、「eject」コマンドを使用する必要がある場合があります。最新のwebpackには、プロジェクトを取り出さずにHtmlWebpackPluginを構成するオプションがある場合があります。 ここに画像の説明を入力してください

— Anoop Chillayi Kochappu
ソース
1

@Ori Droriの回答も使用して、なんとか機能させることができました。Reactコードが大きくなると、クライアントブラウザーが初回アクセス時にダウンロードする必要があるコンパイルされたバンドルも大きくなります。これをうまく処理しないと、ユーザーエクスペリエンスの問題が発生します。

@Oriの回答に追加したのは、bodyタグのindex.html on onload属性にonload関数を追加して実行し、すべてがブラウザに完全に読み込まれた後にローダーが表示されないようにすることでした。以下のスニペットを参照してください。

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>
— ジョセフ・タバジワ
ソース
1

Paceの使用について

このリンクアドレスをここで使用します。

https://github.hubspot.com/pace/docs/welcome/

1.彼らのウェブサイトであなたが望むスタイルを選択し、index.cssに貼り付けてください

2. cdnjsに移動Pace Jsのリンクをコピーし、public / index.htmlのスクリプトタグに追加します。

3.Itは自動的にウェブの負荷を検出し、ブラウザの上部にペースを表示します。

また、CSSで高さとアニメーションを変更することもできます。

— ロッカベル
ソース
素晴らしく、すぐに統合できます。
— UzumakiL
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.