From 3921c6ba78717ec5aea0e114da7805ba1e45f43a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 2 Feb 2021 11:54:52 +0100
Subject: [PATCH] add loader to demo

---
 docs/src/components/DemoFrame/index.vue | 54 +++++++++++++++++++++----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index 6ed9737b..5ce3201a 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/docs/src/components/DemoFrame/index.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="demo-frame">
-    <div v-show="isLoading" class="demo-frame__loader">
-      …
+  <div class="demo-frame" :class="{ 'is-inline': inline }">
+    <div class="demo-frame__loader-wrapper" v-if="isLoading">
+      <div class="demo-frame__loader" />
     </div>
     <iframe
-      v-show="!isLoading"
       v-resize.quiet
       :src="`/demos/${name}?${query}`"
       style="background-color: transparent;"
@@ -71,11 +70,52 @@ export default {
   flex-direction: column;
   border-radius: 0.5rem;
   overflow: hidden;
-  background-color: rgba($colorBlack, 0.05);
+  position: relative;
+  min-height: 8rem;
 
+  &.is-inline {
+    background-color: rgba($colorBlack, 0.03);
+  }
+
+  &__loader-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &__loader,
+  &__loader:after {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+  }
   &__loader {
-    padding: 1rem;
-    text-align: center;
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999rem;
+    border-top: 2px solid rgba($colorBlack, 0.2);
+    border-right: 2px solid rgba($colorBlack, 0.2);
+    border-bottom: 2px solid rgba($colorBlack, 0.2);
+    border-left: 2px solid $colorBlack;
+    transform: translateZ(0);
+    animation: load8 1.1s infinite linear;
+  }
+
+  @keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
   }
 }
 </style>