diff --git a/power-apps/svg-loading-spinners/README.md b/power-apps/svg-loading-spinners/README.md
new file mode 100644
index 0000000..b501fa1
--- /dev/null
+++ b/power-apps/svg-loading-spinners/README.md
@@ -0,0 +1,57 @@
+# SVG Loading Spinners
+
+One of the best ways to learn to implement simple, static animations in Canvas Apps - learn SVG! 
+SVG is a robust format that allows you to perform vector graphic animations that are compliant with any web-based technology, including Canvas Apps. The simplest way to get started? Start experimenting with loading spinners!
+SVG lets you transform objects by moving, rotating, changing opacity, and much more. To best understand it, review some examples, go through some tutorials (highly recommending [w3schools](https://www.w3schools.com/graphics/svg_animation.asp)), and maybe try experimenting with LLMs!
+
+![preview](./assets/svg-loading-spinners.gif)
+
+
+
+Here are a few examples that may help you get started!
+
+### Dot spinner
+- 8 dots with animated opacity ([source](./source/dot_spinner.svg)) 
+
+![preview](./source/dot_spinner.svg)
+
+### Dots jumping above text
+- Simple indefinite animation with 3 jumping dots ([source](./source/loading_jumping-above-constant.svg)) 
+
+![preview](./source/loading_jumping-above-constant.svg)
+
+- Animation with 3 jumping dots, pausing after every 3rd repetition ([source](./source/loading_animation_updated.svg)) 
+
+![preview](./source/loading_jumping-above-periodic.svg)
+
+### Animated dots next to the text
+- Jumping dots next to the text ([source](./source/loading_next_to_text.svg)) 
+
+![preview](./source/loading_next_to_text.svg)
+
+- Jumping dots converted to text format ([source](./source/loading_next_to_text_dot.svg)) 
+
+![preview](./source/loading_next_to_text_dot.svg)
+
+- Text dots apearing next to the text ([source](./source/loading_next_to_text_dot_appearing.svg)) 
+
+![preview](./source/loading_next_to_text_dot_appearing.svg)
+
+
+## Authors
+
+Author|Socials
+--------|---------
+Jan Chlebek | [LinkedIn](https://www.linkedin.com/in/jan-chlebek/) - ([GitHub](https://github.com/jan-chlebek))
+
+## Minimal path to awesome
+
+1. Open your Power App in edit mode
+2. Copy the contents of either the **[svg-loading-spinners.pa.yaml](./source/svg-loading-spinners.pa.yaml)**
+3. Right-click on the screen where you want to add the snippet and select `Paste`
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/svg-loading-spinners" aria-hidden="true" />
diff --git a/power-apps/svg-loading-spinners/assets/svg-loading-spinners.gif b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.gif
new file mode 100644
index 0000000..9335702
Binary files /dev/null and b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.gif differ
diff --git a/power-apps/svg-loading-spinners/assets/svg-loading-spinners.mp4 b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.mp4
new file mode 100644
index 0000000..c51e958
Binary files /dev/null and b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.mp4 differ
diff --git a/power-apps/svg-loading-spinners/assets/svg-loading-spinners.png b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.png
new file mode 100644
index 0000000..65e0f53
Binary files /dev/null and b/power-apps/svg-loading-spinners/assets/svg-loading-spinners.png differ
diff --git a/power-apps/svg-loading-spinners/source/dot_spinner.svg b/power-apps/svg-loading-spinners/source/dot_spinner.svg
new file mode 100644
index 0000000..2eaf696
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/dot_spinner.svg
@@ -0,0 +1,35 @@
+<svg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>
+  <!-- Center at (30, 30) with 8 dots positioned around the circle -->
+  <!-- Dot 1: Top (0 degrees) -->
+  <circle cx='30' cy='4' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='1;0.7;0.5;0.2;0.2;0.2;0.2;0.2;1' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 2: Top-right (45 degrees) -->
+  <circle cx='48.4' cy='11.6' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.2;1;0.7;0.5;0.2;0.2;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 3: Right (90 degrees) -->
+  <circle cx='56' cy='30' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.2;0.2;1;0.7;0.5;0.2;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 4: Bottom-right (135 degrees) -->
+  <circle cx='48.4' cy='48.4' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.2;0.2;0.2;1;0.7;0.5;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 5: Bottom (180 degrees) -->
+  <circle cx='30' cy='56' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.2;0.2;0.2;0.2;1;0.7;0.5;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 6: Bottom-left (225 degrees) -->
+  <circle cx='11.6' cy='48.4' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.2;0.2;0.2;0.2;0.2;1;0.7;0.5;0.2' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 7: Left (270 degrees) -->
+  <circle cx='4' cy='30' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.5;0.2;0.2;0.2;0.2;0.2;1;0.7;0.5' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+  <!-- Dot 8: Top-left (315 degrees) -->
+  <circle cx='11.6' cy='11.6' r='3' fill='#942e89'>
+    <animate attributeName='fill-opacity' values='0.7;0.5;0.2;0.2;0.2;0.2;0.2;1;0.7' dur='1.1s' repeatCount='indefinite' />
+  </circle>
+</svg>
diff --git a/power-apps/svg-loading-spinners/source/loading_jumping-above-constant.svg b/power-apps/svg-loading-spinners/source/loading_jumping-above-constant.svg
new file mode 100644
index 0000000..465b911
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/loading_jumping-above-constant.svg
@@ -0,0 +1,16 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'>
+  <!-- Circle 1 -->
+  <circle cx='50' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0s' />
+  </circle>
+  <!-- Circle 2 -->
+  <circle cx='100' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0.2s' />
+  </circle>
+  <!-- Circle 3 -->
+  <circle cx='150' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0.4s' />
+  </circle>
+  <!-- Loading Text -->
+  <text x='100' y='90' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='middle'> Loading your data </text>
+</svg>
\ No newline at end of file
diff --git a/power-apps/svg-loading-spinners/source/loading_jumping-above-periodic.svg b/power-apps/svg-loading-spinners/source/loading_jumping-above-periodic.svg
new file mode 100644
index 0000000..13e3f5b
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/loading_jumping-above-periodic.svg
@@ -0,0 +1,15 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'>
+  <!-- Circle 1 -->
+  <circle cx='50' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0s' />
+  </circle>
+  <!-- Circle 2 -->
+  <circle cx='100' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0.2s' />
+  </circle>
+  <!-- Circle 3 -->
+  <circle cx='150' cy='50' r='10' fill='#942e89'>
+    <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0.4s' />
+  </circle>
+  <text x='100' y='90' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='middle'> Loading your data </text>
+</svg>
\ No newline at end of file
diff --git a/power-apps/svg-loading-spinners/source/loading_next_to_text.svg b/power-apps/svg-loading-spinners/source/loading_next_to_text.svg
new file mode 100644
index 0000000..4620c5d
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/loading_next_to_text.svg
@@ -0,0 +1,15 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+  <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+  <!-- First dot -->
+  <circle cx='210' cy='40' r='6' fill='#942e89'>
+    <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0s' />
+  </circle>
+  <!-- Second dot -->
+  <circle cx='230' cy='40' r='6' fill='#942e89'>
+    <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.2s' />
+  </circle>
+  <!-- Third dot -->
+  <circle cx='250' cy='40' r='6' fill='#942e89'>
+    <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.4s' />
+  </circle>
+</svg>
\ No newline at end of file
diff --git a/power-apps/svg-loading-spinners/source/loading_next_to_text_dot.svg b/power-apps/svg-loading-spinners/source/loading_next_to_text_dot.svg
new file mode 100644
index 0000000..19e3b91
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/loading_next_to_text_dot.svg
@@ -0,0 +1,15 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+  <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+  <!-- First dot -->
+  <text x='185' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+    <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0s' />
+  </text>
+  <!-- Second dot -->
+  <text x='195' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+    <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.2s' />
+  </text>
+  <!-- Third dot -->
+  <text x='205' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+    <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.4s' />
+  </text>
+</svg>
\ No newline at end of file
diff --git a/power-apps/svg-loading-spinners/source/loading_next_to_text_dot_appearing.svg b/power-apps/svg-loading-spinners/source/loading_next_to_text_dot_appearing.svg
new file mode 100644
index 0000000..17de264
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/loading_next_to_text_dot_appearing.svg
@@ -0,0 +1,15 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+  <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+  <!-- First dot -->
+  <text x='185' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+    <animate attributeName='opacity' values='0;1;1;0;0;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+  </text>
+  <!-- Second dot -->
+  <text x='195' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+    <animate attributeName='opacity' values='0;0;1;1;0;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+  </text>
+  <!-- Third dot -->
+  <text x='205' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+    <animate attributeName='opacity' values='0;0;0;1;1;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+  </text>
+</svg>
\ No newline at end of file
diff --git a/power-apps/svg-loading-spinners/source/svg-loading-spinners.pa.yaml b/power-apps/svg-loading-spinners/source/svg-loading-spinners.pa.yaml
new file mode 100644
index 0000000..ad52222
--- /dev/null
+++ b/power-apps/svg-loading-spinners/source/svg-loading-spinners.pa.yaml
@@ -0,0 +1,218 @@
+- cntSVGSpinners:
+    Control: GroupContainer@1.3.0
+    Variant: AutoLayout
+    Properties:
+      DropShadow: =DropShadow.Semibold
+      Height: =475
+      LayoutDirection: =LayoutDirection.Horizontal
+      Width: =950
+      X: =215
+      Y: =135
+    Children:
+      - cntDotSpinner:
+          Control: GroupContainer@1.3.0
+          Variant: AutoLayout
+          Properties:
+            LayoutAlignItems: =LayoutAlignItems.Center
+            LayoutDirection: =LayoutDirection.Vertical
+            LayoutGap: =25
+          Children:
+            - txtLabel1:
+                Control: Text@0.0.51
+                Properties:
+                  Align: ='TextCanvas.Align'.Center
+                  Height: =50
+                  Size: =20
+                  Text: ="Dot spinner"
+                  VerticalAlign: =VerticalAlign.Middle
+                  Weight: ='TextCanvas.Weight'.Semibold
+                  Width: =Parent.Width
+            - imgSpinner1.1:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>
+                      <!-- Center at (30, 30) with 8 dots positioned around the circle -->
+                      <!-- Dot 1: Top (0 degrees) -->
+                      <circle cx='30' cy='4' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='1;0.7;0.5;0.2;0.2;0.2;0.2;0.2;1' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 2: Top-right (45 degrees) -->
+                      <circle cx='48.4' cy='11.6' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.2;1;0.7;0.5;0.2;0.2;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 3: Right (90 degrees) -->
+                      <circle cx='56' cy='30' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.2;0.2;1;0.7;0.5;0.2;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 4: Bottom-right (135 degrees) -->
+                      <circle cx='48.4' cy='48.4' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.2;0.2;0.2;1;0.7;0.5;0.2;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 5: Bottom (180 degrees) -->
+                      <circle cx='30' cy='56' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.2;0.2;0.2;0.2;1;0.7;0.5;0.2;0.2' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 6: Bottom-left (225 degrees) -->
+                      <circle cx='11.6' cy='48.4' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.2;0.2;0.2;0.2;0.2;1;0.7;0.5;0.2' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 7: Left (270 degrees) -->
+                      <circle cx='4' cy='30' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.5;0.2;0.2;0.2;0.2;0.2;1;0.7;0.5' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                      <!-- Dot 8: Top-left (315 degrees) -->
+                      <circle cx='11.6' cy='11.6' r='3' fill='#3498db'>
+                        <animate attributeName='fill-opacity' values='0.7;0.5;0.2;0.2;0.2;0.2;0.2;1;0.7' dur='1.1s' repeatCount='indefinite' />
+                      </circle>
+                    </svg>
+                    ")
+                  Width: =150
+      - cntJumpingDotSpinner:
+          Control: GroupContainer@1.3.0
+          Variant: AutoLayout
+          Properties:
+            LayoutAlignItems: =LayoutAlignItems.Center
+            LayoutDirection: =LayoutDirection.Vertical
+            LayoutGap: =25
+          Children:
+            - txtLabel2:
+                Control: Text@0.0.51
+                Properties:
+                  Align: ='TextCanvas.Align'.Center
+                  Height: =50
+                  Size: =20
+                  Text: ="Dots jumping above text"
+                  VerticalAlign: =VerticalAlign.Middle
+                  Weight: ='TextCanvas.Weight'.Semibold
+                  Width: =Parent.Width
+            - imgSpinner2.1:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'>
+                      <!-- Circle 1 -->
+                      <circle cx='50' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0s' />
+                      </circle>
+                      <!-- Circle 2 -->
+                      <circle cx='100' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0.2s' />
+                      </circle>
+                      <!-- Circle 3 -->
+                      <circle cx='150' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50' dur='0.8s' repeatCount='indefinite' begin='0.4s' />
+                      </circle>
+                      <!-- Loading Text -->
+                      <text x='100' y='90' fill='#942e89' font-family='Arial, sans-serif' font-size='16' text-anchor='middle'> Loading your data </text>
+                    </svg>
+                    ")
+                  Width: =200
+            - imgSpinner2.2:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'>
+                      <!-- Circle 1 -->
+                      <circle cx='50' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0s' />
+                      </circle>
+                      <!-- Circle 2 -->
+                      <circle cx='100' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0.2s' />
+                      </circle>
+                      <!-- Circle 3 -->
+                      <circle cx='150' cy='50' r='10' fill='#3498db'>
+                        <animate attributeName='cy' values='50;20;50;50;20;50;50;20;50;50;50;50' dur='4s' repeatCount='indefinite' begin='0.4s' />
+                      </circle>
+                      <text x='100' y='90' fill='#942e89' font-family='Arial, sans-serif' font-size='16' text-anchor='middle'> Loading your data </text>
+                    </svg>
+                    ")
+                  Width: =200
+      - cntDotNextToText:
+          Control: GroupContainer@1.3.0
+          Variant: AutoLayout
+          Properties:
+            LayoutAlignItems: =LayoutAlignItems.Center
+            LayoutDirection: =LayoutDirection.Vertical
+            LayoutGap: =25
+          Children:
+            - txtLabel3:
+                Control: Text@0.0.51
+                Properties:
+                  Align: ='TextCanvas.Align'.Center
+                  Height: =50
+                  Size: =20
+                  Text: ="Animated dots next to the text"
+                  VerticalAlign: =VerticalAlign.Middle
+                  Weight: ='TextCanvas.Weight'.Semibold
+                  Width: =Parent.Width
+            - imgSpinner3.1:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+                      <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+                      <!-- First dot -->
+                      <circle cx='210' cy='40' r='6' fill='#942e89'>
+                        <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0s' />
+                      </circle>
+                      <!-- Second dot -->
+                      <circle cx='230' cy='40' r='6' fill='#942e89'>
+                        <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.2s' />
+                      </circle>
+                      <!-- Third dot -->
+                      <circle cx='250' cy='40' r='6' fill='#942e89'>
+                        <animate attributeName='cy' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.4s' />
+                      </circle>
+                    </svg>
+                    ")
+                  Width: =300
+            - imgSpinner3.2:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+                      <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+                      <!-- First dot -->
+                      <text x='185' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+                        <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0s' />
+                      </text>
+                      <!-- Second dot -->
+                      <text x='195' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+                        <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.2s' />
+                      </text>
+                      <!-- Third dot -->
+                      <text x='205' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle'> .
+                        <animate attributeName='y' values='40;30;40;40;30;40;40;30;40;40;40;40' dur='4s' repeatCount='indefinite' begin='0.4s' />
+                      </text>
+                    </svg>
+                    ")
+                  Width: =300
+            - imgSpinner3.3:
+                Control: Image@2.2.3
+                Properties:
+                  Image: |-
+                    ="data:image/svg+xml;utf8, "& EncodeUrl("
+                    <svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'>
+                      <text x='50' y='40' fill='#2c3e50' font-family='Arial, sans-serif' font-size='16' text-anchor='start'> Loading your data </text>
+                      <!-- First dot -->
+                      <text x='185' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+                        <animate attributeName='opacity' values='0;1;1;0;0;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+                      </text>
+                      <!-- Second dot -->
+                      <text x='195' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+                        <animate attributeName='opacity' values='0;0;1;1;0;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+                      </text>
+                      <!-- Third dot -->
+                      <text x='205' y='40' fill='#942e89' font-family='Arial, sans-serif' font-size='22' text-anchor='middle' opacity='0'> .
+                        <animate attributeName='opacity' values='0;0;0;1;1;0' keyTimes='0;0.2;0.4;0.6;0.8;1' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='2s' repeatCount='indefinite' begin='0s' />
+                      </text>
+                    </svg>
+                    ")
+                  Width: =300