Added footer and loading

public/global.css

@@ -16,6 +16,10 @@ html {
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+p {
+  line-height: 1.67;
+}
+
 *,
 *:before,
 *:after {

src/API.svelte

@@ -1,5 +1,7 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import Loading from "./Loading.svelte";
   const dispatch = createEventDispatcher();
   let loaded = false;
   let data;
@@ -24,5 +26,9 @@
 </script>
 
 {#if loaded}
-  <slot />
-{:else}<span>loading</span>{/if}
+  <div in:fade>
+    <slot />
+  </div>
+{:else}
+  <Loading height={400} />
+{/if}

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import BackgroundImage from "./BackgroundImage.svelte";
   import ByPlaceChart from "./ByPlaceChart.svelte";
+  import Footer from "./Footer.svelte";
   import GenderChart from "./GenderChart.svelte";
   import RelationshipChart from "./RelationshipChart.svelte";
   import Section from "./Section.svelte";
@@ -71,3 +72,5 @@
     <SexualCaseMap />
   </Section>
 </main>
+
+<Footer />

src/Footer.svelte

@@ -0,0 +1,37 @@
+<style>
+  footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 200px;
+    margin: 3rem 0;
+  }
+
+  .container {
+    width: 600px;
+    margin: auto;
+  }
+
+  ul {
+    text-align: center;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin-bottom: 10px;
+  }
+</style>
+
+<footer>
+  <div class="container">
+    <ul>
+      <li>資料整理、設計：@kalan</li>
+      <li>程式：@kalan</li>
+      <li>
+        資料來源：<a
+          href="https://dep.mohw.gov.tw/dops/lp-1303-105-xCat-cat02.html">衛生福利部</a>
+      </li>
+    </ul>
+  </div>
+</footer>

src/Loading.svelte

@@ -0,0 +1,55 @@
+<script>
+  export let height;
+</script>
+
+<style>
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid var(--sub);
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: var(--sub) transparent transparent transparent;
+  }
+  .lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  .lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  .lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+  @keyframes lds-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
+
+<div class="wrapper" style={height ? `height: ${height}px` : null}>
+  <div class="lds-ring">
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</div>

src/Section.svelte

@@ -28,6 +28,7 @@
 
   .issue {
     position: absolute;
+    z-index: 0;
     right: 20px;
     top: 20px;
     font-size: 4rem;