Vue-Handschrift-Ladeanimationsprojekt

<Vorlage>
  <div id="loader_wrapper">
    <div id="loader"></div>
    <div class="load_title">Wird geladen, bitte warten......</div>
  </div>
</Vorlage>
<Skript>
  Standard exportieren{
      Name:"wird geladen",
  }
</Skript>
<Stilbereich>
#loader_wrapper{
  Position: fest;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Z-Index: 99;
  Hintergrund: rgba(0, 0, 0,.8);
  Hintergrundgröße: 100 % 100 %;
}
#loader{
  Anzeige: Block;
  Position: relativ;
  links: 50%;
  oben: 50 %;
  Breite: 300px;
  Höhe: 300px;
  /* Hintergrund: rot; */
  Rand: -150px 0 0 -150px;
  Randradius: 50 %;
  Rand: 3px durchgehend transparent;
  Farbe des oberen Rahmens: #fff;
  -Webkit-Animation: 5 Sekunden lang linear und unendlich drehen;
  -ms-Animation: 5 s drehen, linear, unendlich;
  -moz-animation: 5 s lang linear und unendlich drehen;
  -o-Animation: 5 s lang linear und unendlich drehen;
  Animation: 5 s drehen, linear, unendlich;
  Z-Index: 1001;
}
#loader:vor{
  Inhalt:"";
  Position: absolut;
  oben: 5px;
  links: 5px;
  rechts: 5px;
  unten: 5px;
  Randradius: 50 %;
  /* Hintergrund: grün; */
  Rand: 3px durchgehend transparent;
  Farbe des oberen Rahmens: #fff;
   -Webkit-Animation: Spin 8s linear unendlich;
  -ms-Animation: 8 s lang linear und unendlich drehen;
  -moz-animation: Spin 8s linear unendlich;
  -o-Animation: 8 Sekunden linear und unendlich drehen;
  Animation: 8 Sekunden lang linear und unendlich drehen;
}
#loader:nach{
  Inhalt:"";
  Position: absolut;
  oben: 15px;
  links: 15px;
  rechts: 15px;
  unten: 15px;
  Randradius: 50 %;
  /* Hintergrund: gelb; */
  Rand: 3px durchgehend transparent;
  Farbe des oberen Rahmens: #fff;
   -Webkit-Animation: Drehen 8 s linear 1 s unendlich;
  -ms-Animation: Drehen 8 s linear 1 s unendlich;
  -moz-animation: Drehen 8 s linear 1 s unendlich;
  -o-Animation: Drehen 8 s linear 1 s unendlich;
  Animation: Drehen 8 s linear 1 s unendlich;
}
@-webkit-keyframes drehen {
  0 %{
    -webkit-transform: drehen(0 Grad);
    -ms-transform:drehen(0Grad);
    transformieren: drehen (0 Grad);
  }
  100 %{
    -webkit-transform: drehen (360 Grad);
    -ms-transform:drehen(360Grad);
    transformieren: drehen (360 Grad);
  }
}
 
@keyframes drehen{
  0 %{
    -webkit-transform: drehen(0 Grad);
    -ms-transform:drehen(0Grad);
    transformieren: drehen (0 Grad);
  }
  100 %{
    -webkit-transform: drehen (360 Grad);
    -ms-transform:drehen(360Grad);
    transformieren: drehen (360 Grad);
  }
}
#loader_wrapper .load_title{
  Schriftfamilie: „Open Sans“;
  Farbe: #fff;
  Schriftgröße: .3rem;
  Breite: 100 %;
  Textausrichtung: zentriert;
  Z-Index: 9999;
  Position: absolut;
  oben: 70 %;
  Deckkraft: 1;
  Zeilenhöhe: .3rem;
}
</Stil>

<Vorlage>
  <div Klasse="Haupt">
    <wird geladen v-if="!initFlag"></wird geladen>
    111
  </div>
</Vorlage>
 
<Skript>
  importiere Laden aus "../components/loading"
  Standard exportieren {
    Name:"trainin",
    Daten () {
      zurückkehren {
        initFlag:false, //Anforderung zum Initialisieren globaler Daten. false bedeutet, dass die Anforderung fehlgeschlagen ist}
      
    },
    Komponenten: {
      Laden,
    }
  }
</Skript>