From 0c8eaf8cf00bf6a95ff92a0998d74a3e8a77ddc0 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 8 Aug 2024 16:49:51 +0200
Subject: [PATCH 1/2] added svg only onix spinner

---
 .../OnyxLoadingIndicator/OnixSpinner.vue      | 216 ++++++++++++++++++
 .../OnyxLoadingIndicator.vue                  |   2 +
 2 files changed, 218 insertions(+)
 create mode 100644 packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue

diff --git a/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue
new file mode 100644
index 000000000..60b4867f4
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue
@@ -0,0 +1,216 @@
+<template>
+  <svg
+    id="onyxonixspinner"
+    width="50"
+    height="50"
+    version="1.1"
+    viewBox="0 0 50 50"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <radialGradient
+        id="a"
+        cx="25"
+        cy="25"
+        r="9.21"
+        gradientTransform="matrix(1.78 0 0 1.78 -19.4 -19.5)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#e1d88a" offset=".145" />
+        <stop stop-color="#e1d88a" stop-opacity="0" offset=".859" />
+      </radialGradient>
+    </defs>
+    <g>
+      <!-- onix body -->
+      <g transform="matrix(3.77 0 0 3.77 -.226 -.136)" fill="#a9afb2">
+        <path d="m8.65 10.3 0.012 0.328-0.37 0.211-0.323-0.255 0.06-0.364 0.337-0.105z" />
+        <path d="m7.81 11.1-0.313 0.387-0.523-0.174 0.077-0.509 0.535-0.141z" />
+        <path
+          d="m6.51 12-0.486 0.476-0.67-0.078-0.446-0.34 0.152-0.803 0.4-0.287 0.68-0.018 0.455 0.385z"
+        />
+        <path
+          d="m4.61 10.9-0.446 0.504-0.471 0.1-0.554-0.504-0.135-0.561 0.261-0.361 0.615-0.298 0.504 0.17 0.39 0.491z"
+        />
+        <path d="m2.67 9.76-0.988 0.385-0.918-0.61 0.213-1.14 0.947-0.42 1 0.725z" />
+        <path
+          d="m1.91 7.4-0.641 0.403-0.874-0.119-0.319-0.669-0.016-0.977 0.858-0.487 0.821 0.156 0.463 0.709z"
+        />
+        <path
+          d="m3.21 4.8-0.797 0.618-1.02-0.417-0.456-0.802 0.388-0.826 0.801-0.522 0.833 0.132 0.455 1.06z"
+        />
+        <path
+          d="m5.51 4.1-0.913 0.1-0.652-0.774-0.159-0.942 0.764-0.78 0.941 0.128 0.68 0.547-0.08 1.03z"
+        />
+        <path
+          d="m9.21 3.7-1.09 0.402-1.13-0.592-0.414-1.02 0.5-1.06 1.09-0.584 0.821 0.601 0.491 1.05z"
+        />
+        <path
+          d="m13.3 4.6-1.5 0.166-0.576-1.05-1.37-0.222-1.13 0.986 0.074 1.45 0.667 1.03 0.041-0.728 0.243 0.039 0.23 0.59 1.01-0.048 0.963-0.888zm-2.23 1.24c0.105 0.455 0.066 0.395-0.049 0.413-0.115 0.019-0.238-0.148-0.274-0.372s0.028-0.421 0.143-0.44 0.075-0.057 0.18 0.398z"
+        />
+      </g>
+      <!-- onix walzer effect -->
+      <g transform="translate(-3.66 -2.02)" opacity="0">
+        <path
+          d="m39.5 9.56c4.73 3.8 7.4 10 6.91 16.1-0.269 3.31-1.44 6.54-3.35 9.25"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m22.4 42.4c-3.25-0.142-6.46-1.12-9.24-2.82-2.78-1.7-5.11-4.11-6.72-6.94-2.96-5.2-3.31-11.8-0.915-17.3-0.942 5.67 0.228 11.7 3.23 16.6 3.07 5 8.02 8.8 13.6 10.5z"
+          fill="#e1d88a"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m9.25 6.4c4.53-2.16 9.44-3.51 14.4-3.96 4.62-0.42 9.31-0.0755 13.8 1.02"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m35.5 45.8c4.79-2.06 8.69-6.11 10.6-11 0.887-2.29 1.34-4.76 1.32-7.22"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m7.32 44.2c3.83 2.14 8.35 3.02 12.7 2.48 4.35-0.544 8.51-2.51 11.7-5.53 0.575-0.544 1.12-1.12 1.63-1.73"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m13 31.1c0.877 3.06 3.24 5.65 6.2 6.81 1.13 0.443 2.34 0.685 3.56 0.712"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m8.03 18c-0.633-2.78 0.00278-5.81 1.7-8.1 1.69-2.29 4.41-3.79 7.25-3.99 0.952-0.0697 1.91-9.56e-4 2.85 0.203"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m33.4 6.1c2.12-0.667 4.42-0.738 6.58-0.203 2.16 0.535 4.16 1.67 5.72 3.25 1.35 1.36 2.37 3.05 2.95 4.88"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m37 12.8c2.91 2.7 4.55 6.71 4.37 10.7-0.158 3.56-1.76 7.03-4.37 9.45"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m11.6 24.3c-0.538-2.84-0.132-5.85 1.14-8.45s3.4-4.77 5.98-6.08c1.27-0.652 2.65-1.1 4.07-1.32-3.07 1.1-5.81 3.11-7.77 5.72-2.19 2.9-3.4 6.51-3.41 10.1z"
+          fill="#e1d88a"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-linejoin="round"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m28.8 19.3c-2.14-0.498-4.47-0.0844-6.3 1.12-1.18 0.774-2.15 1.86-2.79 3.12-0.638 1.26-0.941 2.69-0.868 4.1"
+          fill="none"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m33.6 30c-0.712 2.15-2.56 3.89-4.74 4.47-2.19 0.582-4.65-0.0088-6.34-1.52-0.885-0.793-1.56-1.82-1.93-2.95 1.6 1.79 3.96 2.87 6.35 2.91 2.5 0.0441 5-1.05 6.66-2.91z"
+          fill="#e1d88a"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <path
+          d="m30.6 15.3c1.91 0.544 3.55 1.97 4.37 3.78 0.811 1.81 0.775 3.99-0.0958 5.77-0.268 0.551-0.611 1.07-1.02 1.52 0.848-1.97 0.965-4.24 0.325-6.28-0.608-1.94-1.89-3.66-3.58-4.8z"
+          fill="#e1d88a"
+          stroke="#dfd268"
+          stroke-linecap="square"
+          stroke-miterlimit="0"
+          stroke-width=".5"
+        />
+        <circle cx="25" cy="25" r="15.8" fill="url(#a)" />
+        <animateTransform
+          attributeName="transform"
+          begin="onyxonixspinner.click"
+          dur="1s"
+          type="rotate"
+          from="0 25 25"
+          to="360 25 25"
+          repeatCount="5"
+        />
+        <animate
+          attributeType="XML"
+          attributeName="opacity"
+          begin="onyxonixspinner.click"
+          dur="1s"
+          from="0"
+          to="1"
+        />
+        <animate
+          attributeType="XML"
+          attributeName="opacity"
+          begin="onyxonixspinner.click 1s"
+          dur="4s"
+          from="1"
+          to="1"
+        />
+      </g>
+      <!-- onix default rotation -->
+      <animateTransform
+        attributeName="transform"
+        begin="0s"
+        dur="2s"
+        type="rotate"
+        from="0 25 25"
+        to="360 25 25"
+        repeatCount="indefinite"
+      />
+    </g>
+    <animateTransform
+      attributeName="transform"
+      begin="onyxonixspinner.click"
+      keySplines=".5 0 .5 1"
+      dur="1s"
+      type="rotate"
+      from="0"
+      to="360"
+      repeatCount="5"
+    />
+    <animateTransform
+      attributeName="transform"
+      begin="onyxonixspinner.click 1s"
+      dur="1s"
+      type="rotate"
+      from="0"
+      to="360"
+      repeatCount="4"
+    />
+  </svg>
+</template>
diff --git a/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue
index 1a4336c9f..98408f5e6 100644
--- a/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue
+++ b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import CircleSpinner from "./CircleSpinner.vue";
 import LoadingDots from "./LoadingDots.vue";
+import OnixSpinner from "./OnixSpinner.vue";
 import type { OnyxLoadingIndicatorProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxLoadingIndicatorProps>(), {
@@ -11,4 +12,5 @@ const props = withDefaults(defineProps<OnyxLoadingIndicatorProps>(), {
 <template>
   <CircleSpinner v-if="props.type === 'circle'" />
   <LoadingDots v-else-if="props.type === 'dots'" />
+  <OnixSpinner v-else-if="props.type === 'onix'" />
 </template>

From a4a10404f1c2c0afc77e2b9b24818db425e1a72c Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 8 Aug 2024 19:13:20 +0200
Subject: [PATCH 2/2] optimize opacity animation

---
 .../OnyxLoadingIndicator/OnixSpinner.vue      | 37 +++++++------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue
index 60b4867f4..ad7d88173 100644
--- a/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue
+++ b/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnixSpinner.vue
@@ -22,30 +22,30 @@
     </defs>
     <g>
       <!-- onix body -->
-      <g transform="matrix(3.77 0 0 3.77 -.226 -.136)" fill="#a9afb2">
-        <path d="m8.65 10.3 0.012 0.328-0.37 0.211-0.323-0.255 0.06-0.364 0.337-0.105z" />
-        <path d="m7.81 11.1-0.313 0.387-0.523-0.174 0.077-0.509 0.535-0.141z" />
+      <g transform="matrix(3.77 0 0 3.77 -.226 -.136)" fill="#a9afb2" stroke-width=".888">
+        <path d="m9.19 9.9 0.0107 0.291-0.329 0.187-0.287-0.227 0.0533-0.323 0.299-0.0933z" />
+        <path d="m8.45 10.6-0.278 0.344-0.465-0.155 0.0684-0.452 0.475-0.125z" />
         <path
-          d="m6.51 12-0.486 0.476-0.67-0.078-0.446-0.34 0.152-0.803 0.4-0.287 0.68-0.018 0.455 0.385z"
+          d="m7.29 11.4-0.432 0.423-0.595-0.0693-0.396-0.302 0.135-0.713 0.355-0.255 0.604-0.016 0.404 0.342z"
         />
         <path
-          d="m4.61 10.9-0.446 0.504-0.471 0.1-0.554-0.504-0.135-0.561 0.261-0.361 0.615-0.298 0.504 0.17 0.39 0.491z"
+          d="m5.6 10.4-0.396 0.448-0.418 0.0888-0.492-0.448-0.12-0.498 0.232-0.321 0.546-0.265 0.448 0.151 0.346 0.436z"
         />
-        <path d="m2.67 9.76-0.988 0.385-0.918-0.61 0.213-1.14 0.947-0.42 1 0.725z" />
+        <path d="m3.88 9.42-0.878 0.342-0.816-0.542 0.189-1.01 0.841-0.373 0.888 0.644z" />
         <path
-          d="m1.91 7.4-0.641 0.403-0.874-0.119-0.319-0.669-0.016-0.977 0.858-0.487 0.821 0.156 0.463 0.709z"
+          d="m3.2 7.32-0.569 0.358-0.776-0.106-0.283-0.594-0.0142-0.868 0.762-0.433 0.729 0.139 0.411 0.63z"
         />
         <path
-          d="m3.21 4.8-0.797 0.618-1.02-0.417-0.456-0.802 0.388-0.826 0.801-0.522 0.833 0.132 0.455 1.06z"
+          d="m4.36 5.01-0.708 0.549-0.906-0.37-0.405-0.713 0.345-0.734 0.712-0.464 0.74 0.117 0.404 0.942z"
         />
         <path
-          d="m5.51 4.1-0.913 0.1-0.652-0.774-0.159-0.942 0.764-0.78 0.941 0.128 0.68 0.547-0.08 1.03z"
+          d="m6.4 4.39-0.811 0.0888-0.579-0.688-0.141-0.837 0.679-0.693 0.836 0.114 0.604 0.486-0.0711 0.915z"
         />
         <path
-          d="m9.21 3.7-1.09 0.402-1.13-0.592-0.414-1.02 0.5-1.06 1.09-0.584 0.821 0.601 0.491 1.05z"
+          d="m9.69 4.04-0.968 0.357-1-0.526-0.368-0.906 0.444-0.942 0.968-0.519 0.729 0.534 0.436 0.933z"
         />
         <path
-          d="m13.3 4.6-1.5 0.166-0.576-1.05-1.37-0.222-1.13 0.986 0.074 1.45 0.667 1.03 0.041-0.728 0.243 0.039 0.23 0.59 1.01-0.048 0.963-0.888zm-2.23 1.24c0.105 0.455 0.066 0.395-0.049 0.413-0.115 0.019-0.238-0.148-0.274-0.372s0.028-0.421 0.143-0.44 0.075-0.057 0.18 0.398z"
+          d="m13.3 4.84-1.33 0.147-0.512-0.933-1.22-0.197-1 0.876 0.0657 1.29 0.593 0.915 0.0364-0.647 0.216 0.0346 0.204 0.524 0.897-0.0426 0.856-0.789zm-1.98 1.1c0.0933 0.404 0.0586 0.351-0.0435 0.367-0.102 0.0169-0.211-0.131-0.243-0.33-0.032-0.199 0.0249-0.374 0.127-0.391 0.102-0.0169 0.0666-0.0506 0.16 0.354z"
         />
       </g>
       <!-- onix walzer effect -->
@@ -166,20 +166,11 @@
           repeatCount="5"
         />
         <animate
-          attributeType="XML"
           attributeName="opacity"
           begin="onyxonixspinner.click"
-          dur="1s"
-          from="0"
-          to="1"
-        />
-        <animate
-          attributeType="XML"
-          attributeName="opacity"
-          begin="onyxonixspinner.click 1s"
-          dur="4s"
-          from="1"
-          to="1"
+          dur="5s"
+          keyTimes="0; .2; 1"
+          values="0; 1; 1"
         />
       </g>
       <!-- onix default rotation -->