🆕 feat: add load animation for the first time (#1102)

masastack · Mar 17, 2023 · a95c9ab · a95c9ab
1 parent dd57cbc
commit a95c9ab
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 6 deletions.
diff --git a/docs/Masa.Docs.WebAssembly/wwwroot/index.html b/docs/Masa.Docs.WebAssembly/wwwroot/index.html
@@ -24,15 +24,88 @@
     <link rel="stylesheet" href="https://cdn.masastack.com/npm/docsearch/docsearch.css" />
     <link href="https://cdn.bootcdn.net/ajax/libs/prism-themes/1.9.0/prism-material-dark.min.css" rel="stylesheet">
     <link href="https://cdn.bootcdn.net/ajax/libs/gridstack.js/7.1.0/gridstack.min.css" rel="stylesheet">
+    <style>
+        .gegga {
+            width: 0;
+        }
+
+        .snurra {
+            filter: url(#gegga);
+        }
+
+        .stopp1 {
+            stop-color: #4318FF;
+        }
+
+        .stopp2 {
+            stop-color: #A18BFF;
+        }
+
+        .halvan {
+            animation: Snurra1 10s infinite linear;
+            stroke-dasharray: 180 800;
+            fill: none;
+            stroke: url(#gradient);
+            stroke-width: 23;
+            stroke-linecap: round;
+        }
+
+        .strecken {
+            animation: Snurra1 3s infinite linear;
+            stroke-dasharray: 26 54;
+            fill: none;
+            stroke: url(#gradient);
+            stroke-width: 23;
+            stroke-linecap: round;
+        }
+
+        .skugga {
+            filter: blur(5px);
+            opacity: 0.3;
+            position: absolute;
+            transform: translate(3px, 3px);
+        }
+
+        @keyframes Snurra1 {
+            0% {
+                stroke-dashoffset: -403px;
+            }
+
+            100% {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
     <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
-        <div class="loading-progress-text"></div>
+        <div style="display: flex;align-items: center;justify-content: center;height: 100vh">
+            <svg class="gegga">
+                <defs>
+                    <filter id="gegga">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="inreGegga"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="inreGegga" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+            </svg>
+            <svg class="snurra" width="200" height="200" viewBox="0 0 200 200">
+                <defs>
+                    <linearGradient id="linjärGradient">
+                        <stop class="stopp1" offset="0"></stop>
+                        <stop class="stopp2" offset="1"></stop>
+                    </linearGradient>
+                    <linearGradient y2="160" x2="160" y1="40" x1="40" gradientUnits="userSpaceOnUse" id="gradient" xlink:href="#linjärGradient"></linearGradient>
+                </defs>
+                <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
+                <circle class="strecken" cx="100" cy="100" r="64"></circle>
+            </svg>
+            <svg class="skugga" width="200" height="200" viewBox="0 0 200 200">
+                <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
+                <circle class="strecken" cx="100" cy="100" r="64"></circle>
+            </svg>
+        </div>
     </div>
 
     <div id="blazor-error-ui">

diff --git a/src/Masa.Try.WebAssembly/wwwroot/index.html b/src/Masa.Try.WebAssembly/wwwroot/index.html
@@ -10,10 +10,90 @@
     <link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet" />
     <link href="_content/Masa.Try.Shared/css/try.css" rel="stylesheet"/>
     <link href="https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+    <style>
+        .gegga {
+            width: 0;
+        }
+
+        .snurra {
+            filter: url(#gegga);
+        }
+
+        .stopp1 {
+            stop-color: #4318FF;
+        }
+
+        .stopp2 {
+            stop-color: #A18BFF;
+        }
+
+        .halvan {
+            animation: Snurra1 10s infinite linear;
+            stroke-dasharray: 180 800;
+            fill: none;
+            stroke: url(#gradient);
+            stroke-width: 23;
+            stroke-linecap: round;
+        }
+
+        .strecken {
+            animation: Snurra1 3s infinite linear;
+            stroke-dasharray: 26 54;
+            fill: none;
+            stroke: url(#gradient);
+            stroke-width: 23;
+            stroke-linecap: round;
+        }
+
+        .skugga {
+            filter: blur(5px);
+            opacity: 0.3;
+            position: absolute;
+            transform: translate(3px, 3px);
+        }
+
+        @keyframes Snurra1 {
+            0% {
+                stroke-dashoffset: -403px;
+            }
+
+            100% {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-    <div id="app">Loading...</div>
+
+    <div id="app">
+        <div style="display: flex;align-items: center;justify-content: center;height: 100vh">
+            <svg class="gegga">
+                <defs>
+                    <filter id="gegga">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="inreGegga"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="inreGegga" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+            </svg>
+            <svg class="snurra" width="200" height="200" viewBox="0 0 200 200">
+                <defs>
+                    <linearGradient id="linjärGradient">
+                        <stop class="stopp1" offset="0"></stop>
+                        <stop class="stopp2" offset="1"></stop>
+                    </linearGradient>
+                    <linearGradient y2="160" x2="160" y1="40" x1="40" gradientUnits="userSpaceOnUse" id="gradient" xlink:href="#linjärGradient"></linearGradient>
+                </defs>
+                <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
+                <circle class="strecken" cx="100" cy="100" r="64"></circle>
+            </svg>
+            <svg class="skugga" width="200" height="200" viewBox="0 0 200 200">
+                <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
+                <circle class="strecken" cx="100" cy="100" r="64"></circle>
+            </svg>
+        </div>
+    </div>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.