diff --git a/dashboard/src/setup.css b/dashboard/src/setup.css
index a2c7bc5c8..67e1888df 100644
--- a/dashboard/src/setup.css
+++ b/dashboard/src/setup.css
@@ -22,38 +22,3 @@ h1 {
   background-color: transparent;
   cursor: copy;
 }
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes color {
-  0% {
-    background-position: 0% 0%;
-  }
-  100% {
-    background-position: 100% 100%;
-  }
-}
-
-.gradient {
-  --blob-size: 200px;
-  --speed: 6s;
-  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
-
-  width: var(--blob-size);
-  height: var(--blob-size);
-  filter: blur(calc(var(--blob-size) / 5));
-  animation: rotate var(--speed) var(--easing) alternate infinite, color 5s var(--easing) alternate infinite;
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  margin-top: 60px;
-  margin-bottom: 80px;
-
-  background-size: 200% 200%;
-  background-image: linear-gradient(#096dbd, #c340ff, #ffa240);
-}
diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue
index c37b0b75e..1baade8a8 100644
--- a/dashboard/src/views/SetupView.vue
+++ b/dashboard/src/views/SetupView.vue
@@ -171,7 +171,17 @@ onMounted(async () => {
     <Transition name="fade-scale" mode="out-in">
       <div class="view" v-if="waitingForDnsSetup" style="max-width: unset; height: 100%;">
         <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
-          <div class="gradient" v-if="waitingForDnsSetup"></div>
+          <div class="whirlpool" v-if="waitingForDnsSetup">
+            <div class="ring ring1"></div>
+            <div class="ring ring2"></div>
+            <div class="ring ring3"></div>
+            <div class="ring ring4"></div>
+            <div class="ring ring5"></div>
+            <div class="ring ring6"></div>
+            <div class="ring ring7"></div>
+            <div class="ring ring8"></div>
+            <div class="ring ring9"></div>
+          </div>
           <h3>Please wait while Cloudron is setting up the dashboard</h3>
           <h4 style="margin-top: 0">{{ progressMessage }}</h4>
           <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
@@ -269,4 +279,115 @@ onMounted(async () => {
   font-size: 0.9em;
 }
 
+.whirlpool {
+  width: 100px;
+  height: 100px;
+  margin: 100px auto;
+  position: relative;
+}
+
+.ring:before
+{
+  content: '';
+  border-radius: 50%;
+  border: 1px solid #096dbd;
+  height: 30px;
+  width: 100px;
+  position: absolute;
+}
+
+.ring1:before
+{
+  left: 40px;
+  width: 20px;
+  top: 12px;
+  height: 6px;
+  animation: 2.5s ease 0s infinite spinner;
+}
+
+.ring2:before
+{
+  left: 35px;
+  width: 30px;
+  top: 10.5px;
+  height: 9px;
+  animation: 2.5s ease 0.1s infinite spinner;
+}
+
+.ring3:before
+{
+  left: 30px;
+  width: 40px;
+  top: 9px;
+  height: 12px;
+  animation: 2.5s ease 0.2s infinite spinner;
+}
+
+.ring4:before
+{
+  left: 25px;
+  width: 50px;
+  top: 7.5px;
+  height: 15px;
+  animation: 2.5s ease 0.3s infinite spinner;
+}
+
+.ring5:before
+{
+  left: 20px;
+  width: 60px;
+  top: 6px;
+  height: 18px;
+  animation: 2.5s ease 0.4s infinite spinner;
+}
+
+.ring6:before
+{
+  left: 15px;
+  width: 70px;
+  top: 4.5px;
+  height: 21px;
+  animation: 2.5s ease 0.5s infinite spinner;
+}
+
+.ring7:before
+{
+  left: 10px;
+  width: 80px;
+  top: 3px;
+  height: 24px;
+  animation: 2.5s ease 0.6s infinite spinner;
+}
+
+.ring8:before
+{
+  left: 5px;
+  width: 90px;
+  top: 1.5px;
+  height: 27px;
+  animation: 2.5s ease 0.7s infinite spinner;
+}
+
+.ring9:before
+{
+  width: 100px;
+  height: 30px;
+  animation: 2.5s ease 0.8s infinite spinner;
+}
+
+@keyframes spinner {
+  0% {
+    transform: translateY(10px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+  50% {
+    transform: translateY(60px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+  100% {
+    transform: translateY(10px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+}
+
 </style>