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;
}
</スタイル>

<テンプレート>
  <div class="main">
    <v-if="!initFlag" をロード中></ロード中>
    111
  </div>
</テンプレート>
 
<スクリプト>
  「../components/loading」からロードをインポートします。
  エクスポートデフォルト{
    名前:"トランニン",
    データ （） {
      戻る {
        initFlag:false, // グローバル データを初期化する要求 false は要求が失敗したことを意味します}
      
    },
    コンポーネント:{
      読み込み中、
    }
  }
</スクリプト>