replacement of the loading circle by a css animation with the logo

examples/Demo/Client/wwwroot/index.html

@@ -10,6 +10,7 @@
     <base href="/" />
     <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
     <link href="FluentUI.Demo.Client.styles.css" rel="stylesheet" />
+    <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
 
     <!-- Statistics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-VML6BZWWTC"></script>
@@ -36,9 +37,13 @@
     <!-- End -->
 
     <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
+        <svg id="logo-anim" class="loading-progress" width="50%" height="50%" viewBox="0 0 1891 1715" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g transform="matrix(1,0,0,1,-1208,-342)">
+                <path d="M3093.99,628.346C3097.31,727.629 3102.76,787.808 3093.85,865.99C3084.94,944.172 3068.42,1012.16 3040.53,1097.44C3001.45,1222.3 2961.66,1262.75 2898.65,1360.48C2855.92,1417.71 2808.15,1473.19 2777.65,1503.18C2723.55,1556.38 2645.92,1636.72 2599.02,1644.61C2552.12,1652.51 2529.54,1597.8 2514.32,1548.28C2501.18,1505.54 2503.39,1448.68 2502.16,1394.91C2500.93,1341.14 2501.57,1282.77 2488.9,1227.92C2475.65,1170.58 2456.38,1115.39 2427.13,1063.72C2397.69,1011.73 2361.87,964.991 2318.65,924.087C2264.64,872.964 2202.73,833.988 2133.63,806.007C2066.99,779.019 2002.37,766.35 1926.22,764.538C1824.89,768.556 1774.51,777.89 1665.33,822.401C1624.1,843.683 1572.37,877.526 1537.12,908.165C1484.11,954.25 1441.04,1007.87 1407.38,1069.29C1363.18,1149.94 1339.17,1275.01 1337.54,1310.17C1335.68,1350.44 1336.88,1391.5 1342.87,1431.3C1349.05,1472.34 1365.24,1556.2 1408.26,1629.16C1451.94,1707.98 1505.54,1758.46 1561.27,1804.69C1668.65,1881.12 1713.79,1907.77 1934.67,1934.19C2016.75,1938.22 2124.19,1932.05 2244.29,1908.64C2336.04,1891.27 2424.45,1863.24 2508.74,1823.8C2562.5,1798.65 2603.95,1776.19 2656.25,1747.89C2659.87,1745.93 2675.98,1734.3 2677.78,1736.61C2679.76,1739.17 2647.78,1772.85 2635.09,1785.74C2591.13,1830.44 2541.53,1868.17 2489.19,1902.29C2436.4,1939.54 2353.06,1981.81 2231.09,2019.38C2156.32,2042.68 2053.87,2050.19 1998.88,2055.1C1958.75,2058.68 1918.04,2056.18 1877.59,2055.79C1824.08,2055.27 1771.93,2045.58 1720.11,2032.7C1645.81,2014.23 1576.91,1983.22 1513.44,1941.36C1459.37,1905.7 1411.02,1862.85 1369.65,1812.25C1337.69,1773.16 1286.94,1705.34 1245.4,1589.12C1229.26,1543.96 1217.55,1497.45 1213.04,1449.42C1205.99,1357 1206.73,1314.43 1213.11,1248.53C1221.37,1163.14 1261.35,1062.1 1298.67,994.534C1332.3,933.664 1425.92,808.966 1531.76,747.306C1629.58,690.315 1729.67,642.841 1873.38,638.136C1980.28,634.636 2102.57,644.685 2194.16,632.141C2287.62,622.649 2381.26,585.473 2422.95,562.87C2482.7,530.477 2536.63,489.705 2583.49,440.1C2588.55,434.739 2593.71,426.249 2601.23,431.898C2605.39,435.27 2607.36,439.79 2607.36,451.201C2606.59,468.85 2603.37,486.45 2599.58,503.709C2584.06,574.425 2560.08,641.958 2522.28,704.154C2517.36,712.255 2504.97,729.134 2509.64,732.893C2514.02,736.41 2578.38,717.928 2680.9,672.513C2762.94,633.181 2822.5,581.069 2870.98,520.821C2913.39,469.51 2948.08,413.377 2980.58,355.607C2983.95,349.63 2988.43,342.073 2996.88,342.046C3004.2,342.022 3008.11,349.183 3011.01,354.708C3056.11,440.588 3084.87,531.494 3093.99,628.346Z" stroke="#682A7B" stroke-width="4" />
+
+                <path id="path-with-grad" d="M1920.03,871.888C1930.4,866.704 1942.6,866.704 1952.97,871.888L2247.64,1019.21C2260.12,1025.45 2268,1038.2 2268,1052.15C2268,1066.1 2260.12,1078.85 2247.64,1085.09L2018.86,1199.47L2247.64,1313.84C2260.12,1320.08 2268,1332.83 2268,1346.79C2268,1360.74 2260.12,1373.49 2247.64,1379.73L1973.33,1516.87L1973.33,1813.17C1973.33,1826.57 1966.05,1838.92 1954.32,1845.4C1942.59,1851.89 1928.26,1851.49 1916.9,1844.36L1622.24,1659.25C1611.51,1652.51 1605,1640.73 1605,1628.06L1605,1052.15C1605,1038.2 1612.88,1025.45 1625.36,1019.21L1920.03,871.888ZM1678.67,1074.91L1678.67,1607.71L1899.67,1746.54L1899.67,1494.1C1899.67,1480.15 1907.55,1467.4 1920.03,1461.16L2148.81,1346.79L1920.03,1232.41C1907.55,1226.17 1899.67,1213.42 1899.67,1199.47C1899.67,1185.52 1907.55,1172.76 1920.03,1166.53L2148.81,1052.15L1936.5,946.006L1678.67,1074.91Z" stroke="#4A81C3" stroke-width="4" />
+            </g>
+
         </svg>
         <div class="loading-progress-text"></div>
     </div>

examples/Demo/Shared/wwwroot/css/site.css

@@ -252,6 +252,7 @@ kbd {
         content: "An error has occurred: "
     }
 
+/* Animate the blazor FluentUI during the loading */
 .loading-progress {
     position: relative;
     display: block;
@@ -260,25 +261,47 @@ kbd {
     margin: 20vh auto 1rem auto;
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: var( --neutral-fill-layer-rest);
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
+#logo-anim path:nth-child(1) {
+    stroke-dasharray: 2000;
+    stroke-dashoffset: 2000;
+    stroke-width: 1.25em;
+    fill: #682A7B;
+    fill-opacity: 0.1;
+    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.5s;
+}
+
+#logo-anim path:nth-child(2) {
+    stroke-width: 1.25em;
+    stroke-dasharray: 2000;
+    stroke-dashoffset: 2000;
+    fill: #4A81C3;
+    fill-opacity: 0.1;
+    animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.2s;
+}
+
+@keyframes line-anim {
+    to {
+        stroke-dashoffset: 0;
+        stroke-width: 0;
+    }
+}
+
+@keyframes fill-anim {
+    from {
+        fill-opacity: 0.1;
     }
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
+    to {
+        fill-opacity: 1;
+    }
+}
 
 .loading-progress-text {
     position: absolute;
     text-align: center;
     font-weight: bold;
     inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+    margin-top:80px;
 }
 
     .loading-progress-text:after {