diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index c568a3051..df6c5b667 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -102,27 +102,11 @@ function animateLoading(start){
  * Shows spinner if start is true or not given, hides it if false.
  * Optional parameter options for spin.js options.
  */
-function animateSpinner(el, start, options) {
+function animateSpinner(el, start) {
   // If overlaying the whole page, put the spinner in the middle of the page
-  var overlayPage = false;
-  if (_.isUndefined(el) || el === null) {
-    overlayPage = true;
-    if ($(document.body).has('.loading-overlay-center').length === 0) {
-      $(document.body).append('<div class="loading-overlay-center" />');
-    }
-    el = $(document.body).find('.loading-overlay-center');
-  }
+  var overlayPage = _.isUndefined(el) || el === null;
 
-  if (_.isUndefined(start)) {
-    start = true;
-  }
-
-  if (start && options) {
-    $(el).spin(options);
-  }
-  else {
-    $(el).spin(start);
-  }
+  if (_.isUndefined(start)) start = true;
 
   if (start) {
     if (overlayPage) {
diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss
index 21e0ec4fc..3bf39918c 100644
--- a/app/assets/stylesheets/shared/assets.scss
+++ b/app/assets/stylesheets/shared/assets.scss
@@ -25,7 +25,7 @@
     width: 100%;
 
     &.processing {
-      background-image: url("/images/medium/processing.gif");
+      background-image: url("/images/medium/loading.svg");
       background-position: center;
       background-repeat: no-repeat;
     }
diff --git a/app/assets/stylesheets/shared/file_preview.scss b/app/assets/stylesheets/shared/file_preview.scss
index ca255ef3d..a0aa8276a 100644
--- a/app/assets/stylesheets/shared/file_preview.scss
+++ b/app/assets/stylesheets/shared/file_preview.scss
@@ -31,9 +31,10 @@
     width: 100%;
 
     &.processing {
-      background-image: url("/images/medium/processing.gif");
+      background-image: url("/images/medium/loading_white.svg");
       background-position: center;
       background-repeat: no-repeat;
+      background-size: 64px;
     }
 
     .wopi-file-preview {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 3b27f3926..45b352513 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1256,20 +1256,34 @@ ul.content-activities {
 
 /* Overlay to disable interaction while loading ajax */
 .loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   bottom: 0;
-  z-index: 1000000000;
   cursor: wait;
-}
-
-.loading-overlay-center {
-  position: fixed;
-  left:50%;
-  top:50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
   z-index: 1000000000;
+
+  &::before {
+    background: $color-white;
+    content: "";
+    display: block;
+    height: 100%;
+    opacity: .5;
+    width: 100%;
+  }
+
+  &::after {
+    background-image: url("/images/medium/loading.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }
 
 .turbolinks-progress-bar::before {
diff --git a/public/images/medium/loading.svg b/public/images/medium/loading.svg
new file mode 100644
index 000000000..338af0e24
--- /dev/null
+++ b/public/images/medium/loading.svg
@@ -0,0 +1,42 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#104DA9"/>
+<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#104DA9"/>
+<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#104DA9"/>
+<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#104DA9"/>
+<animate
+  xlink:href="#top_left"
+  attributeName="opacity"
+  from="1" to="0" dur="0.8s"
+  values="1; 1; 0; 0; 0; 0; 0; 0; 1"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875;  1"
+  repeatCount="indefinite"
+  id="tlfade"
+  />
+<animate
+  xlink:href="#top_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="trfade"
+/>
+<animate
+  xlink:href="#bottom_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="brfade"
+/>
+<animate
+  xlink:href="#bottom_left"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="blfade"
+/>
+</svg>
diff --git a/public/images/medium/loading_white.svg b/public/images/medium/loading_white.svg
new file mode 100644
index 000000000..c3a97bb40
--- /dev/null
+++ b/public/images/medium/loading_white.svg
@@ -0,0 +1,42 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#ffffff"/>
+<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#ffffff"/>
+<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#ffffff"/>
+<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#ffffff"/>
+<animate
+  xlink:href="#top_left"
+  attributeName="opacity"
+  from="1" to="0" dur="0.8s"
+  values="1; 1; 0; 0; 0; 0; 0; 0; 1"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875;  1"
+  repeatCount="indefinite"
+  id="tlfade"
+/>
+<animate
+  xlink:href="#top_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="trfade"
+/>
+<animate
+  xlink:href="#bottom_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="brfade"
+/>
+<animate
+  xlink:href="#bottom_left"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="blfade"
+/>
+</svg>