From 38df7b3774bc5a040a91d6e3308eaf8a58432505 Mon Sep 17 00:00:00 2001
From: PC-Axis <lorenzo.bruni@cso.ie>
Date: Sun, 13 Sep 2020 11:46:07 +0100
Subject: [PATCH] Spinner plugin upgraded to use the Bootstrap background
 property (bg-) instead of custom colours. Diff and synch the file
 root/template/spinner.html in your application

---
 src/css/api.plugin.css     | 22 +++++++---------------
 test/template/spinner.html | 10 +++++-----
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/css/api.plugin.css b/src/css/api.plugin.css
index b35882c..96870f4 100644
--- a/src/css/api.plugin.css
+++ b/src/css/api.plugin.css
@@ -37,7 +37,7 @@ API - Plugin - Spinner
 
 #spinner {
     display: none;
-    background: rgba(255,255,255,0.7);
+    background: rgba(255, 255, 255, 0.7);
     color: #666666;
     position: fixed;
     height: 100vh;
@@ -63,7 +63,7 @@ API - Plugin - Spinner
     /* Half the width */
 }
 
-#spinner .loader > div {
+#spinner .loader>div {
     background-color: #333;
     height: 100%;
     width: 10px;
@@ -72,39 +72,32 @@ API - Plugin - Spinner
     animation: sk-stretchdelay 1.2s infinite ease-in-out;
 }
 
-#spinner .loader .rect-yellow {
-    background-color: #FAA21B;
-}
+#spinner .loader .rect-1 {}
 
-#spinner .loader .rect-mint {
+#spinner .loader .rect-2 {
     -webkit-animation-delay: -1.1s;
     animation-delay: -1.1s;
-    background-color: #5BC1A5;
 }
 
-#spinner .loader .rect-purple {
+#spinner .loader .rect-3 {
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
-    background-color: #1D345C;
 }
 
-#spinner .loader .rect-green {
+#spinner .loader .rect-4 {
     -webkit-animation-delay: -0.9s;
     animation-delay: -0.9s;
-    background-color: #006168;
 }
 
-#spinner .loader .rect-teal {
+#spinner .loader .rect-5 {
     -webkit-animation-delay: -0.8s;
     animation-delay: -0.8s;
-    background-color: #45C1C0;
 }
 
 @-webkit-keyframes sk-stretchdelay {
     0%, 40%, 100% {
         -webkit-transform: scaleY(0.4);
     }
-
     20% {
         -webkit-transform: scaleY(1.0);
     }
@@ -115,7 +108,6 @@ API - Plugin - Spinner
         transform: scaleY(0.4);
         -webkit-transform: scaleY(0.4);
     }
-
     20% {
         transform: scaleY(1.0);
         -webkit-transform: scaleY(1.0);
diff --git a/test/template/spinner.html b/test/template/spinner.html
index 29c8fd5..4b85233 100644
--- a/test/template/spinner.html
+++ b/test/template/spinner.html
@@ -1,10 +1,10 @@
 <!-- API - Plugin - Spinner -->
 <div class="loader">
-    <div class="rect-yellow"></div>
-    <div class="rect-mint"></div>
-    <div class="rect-purple"></div>
-    <div class="rect-green"></div>
-    <div class="rect-teal"></div>
+    <div class="rect-1 bg-warning"></div>
+    <div class="rect-2 bg-danger"></div>
+    <div class="rect-3 bg-primary"></div>
+    <div class="rect-4 bg-secondary"></div>
+    <div class="rect-5 bg-tertiary"></div>
 </div>
 
 <div class="progress mt-5" style="display: none;">