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

Author: lorenzobruni

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);

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;">