Loader progress a bit more tasteful

mopidy_iris/static/app.css

@@ -4166,33 +4166,25 @@ select {
   width: 120px;
   margin: 0 auto;
   position: relative; }
-  .loader__spinner:before, .loader__spinner:after {
-    content: '';
-    display: block;
-    margin: 0 auto;
+  .loader__spinner__background, .loader__spinner__foreground {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     border-radius: 100%;
     border-style: solid;
-    border-width: 2px; }
-  .loader__spinner:after {
+    border-width: 2px;
+    border-color: transparent; }
+  .loader__spinner__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-color: rgba(128, 128, 128, 0.35); }
+  .loader__spinner__foreground {
     animation-name: spin;
     animation-duration: 0.5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    border-bottom-color: transparent;
     border-right-color: #32b5f2; }
-  .loader__spinner:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-color: rgba(128, 128, 128, 0.2); }
-
-.loader--progress .loader__spinner:after {
-  display: none; }
 
 .loader--progress .loader__spinner__progress {
   transform: rotate(-90deg) translate(3px, -3px);
@@ -4201,9 +4193,10 @@ select {
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out; }
+    transition: all 0.2s ease-in-out;
+    stroke: #b4b4b4; }
 
-.loader--white .loader__spinner:after {
+.loader--white .loader__spinner__foreground {
   border-right-color: #FFFFFF; }
 
 .loader--body {

mopidy_iris/static/index.html

@@ -100,7 +100,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1581669957";
+	var build = "1581906971";
 	var version = "3.44.3";
 
 	// Construct the script tag

src/js/components/Loader.js

@@ -77,6 +77,8 @@ export default memo((props) => {
       <div className={classNameString}>
         <div className="loader__spinner">
           <Icon name="check" />
+          <div className="loader__spinner__background" />
+          <div className="loader__spinner__foreground" />
         </div>
       </div>
     );
@@ -92,6 +94,7 @@ export default memo((props) => {
             radius={mini ? '13' : '60'}
             progress={progress}
           />
+          <div className="loader__spinner__foreground" />
         </div>
       </div>
     );
@@ -99,7 +102,10 @@ export default memo((props) => {
 
   return (
     <div className={classNameString}>
-      <div className="loader__spinner" />
+      <div className="loader__spinner">
+        <div className="loader__spinner__background" />
+        <div className="loader__spinner__foreground" />
+      </div>
     </div>
   );
 });

src/js/views/Debug.js

@@ -139,7 +139,7 @@ Back
               <div className="name" />
               <div className="input">
                 <a className="button button--default" onClick={(e) => this.props.uiActions.createNotification({ content: 'Test notification' })}>Create notification</a>
-                <a className="button button--default" onClick={(e) => this.props.uiActions.startProcess('test_process', "Test process", {remaining: 32, total: 100})}>Create process notification</a>
+                <a className="button button--default" onClick={(e) => this.props.uiActions.startProcess('test_process', "Test process", {remaining: 68, total: 100})}>Create process notification</a>
                 <a className="button button--default" onClick={(e) => this.props.pusherActions.request('test')}>Run test process</a>
               </div>
             </div>

src/scss/components/_loader.scss

@@ -19,11 +19,8 @@
 		margin: 0 auto;
 		position: relative;
 
-		&:before,
-		&:after {
-			content: '';
-			display: block;
-			margin: 0 auto;
+		&__background,
+		&__foreground {
 			width: 100%;
 			height: 100%;
 			box-sizing: border-box;
@@ -31,37 +28,32 @@
 				radius: 100%;
 				style: solid;
 				width: 2px;
+				color: transparent;
 			}
 		}
 
-		&:after {
-			@include spin();
-			border-top-color: transparent;
-			border-left-color: transparent;
-			border-bottom-color: transparent;
-			border-right-color: colour(blue);
-		}
-
-		&:before {
+		&__background {
 			position: absolute;
 			top: 0;
 			left: 0;
-			border-color: rgba(128,128,128,0.2);
+			border-color: rgba(128,128,128,0.35);
+		}
+
+		&__foreground {
+			@include spin();
+			border-right-color: colour(blue);
 		}
 	}
 
 	&--progress {
 		.loader__spinner {
-			&:after {
-				display: none;
-			}
-
 			&__progress {
 				transform: rotate(-90deg) translate(3px, -3px);
 				position: absolute;
 
 				&__circle {
 					@include animate();
+					stroke: rgba(175,175,175,1);
 				}
 			}
 		}
@@ -69,7 +61,7 @@
 
 	&--white {
 		.loader__spinner {
-			&:after {
+			&__foreground {
 				border-right-color: colour(white);
 			}
 		}