From b0f81d787645fe2dfd36158e8c985284d12db7d9 Mon Sep 17 00:00:00 2001
From: Christophe Peugnet <3845786+tossnet@users.noreply.github.com>
Date: Thu, 28 Nov 2024 16:54:34 +0100
Subject: [PATCH] [Doc] for the doc website add an animation of fluentui logo
 (#2985)

* Update InputFileByCode.razor

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

---------

Co-authored-by: Christophe Peugnet <christophe.peugnet@outlook.fr>
Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>
---
 examples/Demo/Client/wwwroot/index.html   | 11 ++++--
 examples/Demo/Shared/wwwroot/css/site.css | 45 +++++++++++++++++------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/examples/Demo/Client/wwwroot/index.html b/examples/Demo/Client/wwwroot/index.html
index 9783c281a5..b275fa7e28 100644
--- a/examples/Demo/Client/wwwroot/index.html
+++ b/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>
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
index 8db088145f..15feed2986 100644
--- a/examples/Demo/Shared/wwwroot/css/site.css
+++ b/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 {