UPDATE

.upm/store.json

-{"version":2,"languages":{"nodejs-npm":{"specfileHash":"58c9ae4e8687db16ea7925086afedf3b","lockfileHash":"2157a76123c004596bbf191d5ad4beb8"}}}
+{"version":2,"languages":{"nodejs-npm":{"specfileHash":"58c9ae4e8687db16ea7925086afedf3b","lockfileHash":"15b44c81a6a4931207c0b38e5ba918c2"}}}

src/App.vue

@@ -4,16 +4,18 @@ import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
+  <!-- <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
     </div>
-  </header>
+  </header> -->
 
   <main>
-    <TheWelcome />
+    <div class="loading">
+        <span>Loading...</span>
+    </div>
   </main>
 </template>
 

src/assets/base.css

@@ -72,3 +72,63 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+body{
+  margin: 0;
+  padding: 0;
+  background: #34495e;
+  height: 100vh;
+  display: flex;
+  /* 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */
+  align-items:center;
+  justify-content: center;
+  /* font-family: "montserrat" ,sans-serif; */
+  /* 在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用 */
+}
+.loading{
+  width:200px;
+  height:200px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border-top: 10px solid #e74c3c;
+  position:relative;
+  animation: a1 2s linear infinite;
+}
+.loading::before,.loading::after{
+  content: ' ';
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left:0;
+  top: -10px;
+  box-sizing:border-box;
+  border-radius: 50%;
+}
+.loading::before{
+  border-top: 10px solid #e67e22;
+  transform: rotate(120deg);
+}
+.loading::after{
+  border-top: 10px solid #3498db;
+  transform: rotate(240deg);
+}
+
+.loading span{
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  color: #fff;
+  text-align: center;
+  line-height: 200px;
+  animation: a2 2s linear infinite;
+}
+@keyframes a1{
+  to{
+      transform: rotate(360deg);
+  }
+}
+@keyframes a2{
+  to{
+      transform: rotate(-360deg);
+  }
+}
\ No newline at end of file

src/assets/main.css

@@ -32,4 +32,64 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
+
+  body{
+    margin: 0;
+    padding: 0;
+    background: #34495e;
+    height: 100vh;
+    display: flex;
+    /* 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */
+    align-items:center;
+    justify-content: center;
+    /* font-family: "montserrat" ,sans-serif; */
+    /* 在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用 */
+}
+.loading{
+    width:200px;
+    height:200px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border-top: 10px solid #e74c3c;
+    position:relative;
+    animation: a1 2s linear infinite;
+}
+.loading::before,.loading::after{
+    content: ' ';
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left:0;
+    top: -10px;
+    box-sizing:border-box;
+    border-radius: 50%;
+}
+.loading::before{
+    border-top: 10px solid #e67e22;
+    transform: rotate(120deg);
+}
+.loading::after{
+    border-top: 10px solid #3498db;
+    transform: rotate(240deg);
+}
+
+.loading span{
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    color: #fff;
+    text-align: center;
+    line-height: 200px;
+    animation: a2 2s linear infinite;
+}
+@keyframes a1{
+    to{
+        transform: rotate(360deg);
+    }
+}
+@keyframes a2{
+    to{
+        transform: rotate(-360deg);
+    }
+}
 }