Improve non-composited animation

dev/Styles/_progressjs.css

@@ -1,30 +1,20 @@
 #progressjs {
+	background-color: #999;
 	left: 0;
+	overflow: hidden;
 	position: fixed;
 	top: 0;
-	width: 100%;
-	z-index: 2000;
-}
-
-.progressjs-inner {
-	background-color: #939595;
-	height: 3px;
-	overflow: hidden;
-	position: relative;
 	transition: width .5s;
 	width: 0;
 	z-index: 2000;
 }
 
-.progressjs-percent {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: -32px;
-	bottom: 0;
+#progressjs > div {
+	animation: simple-pace-stripe-animation 500ms linear infinite;
 	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
 	background-size: 32px 32px;
-	animation: simple-pace-stripe-animation 500ms linear infinite;
+	height: 3px;
+	margin-right: -32px;
 }
 
 @keyframes simple-pace-stripe-animation {

dev/boot.js

@@ -72,11 +72,11 @@ const
 	p = win.progressJs = {
 		set: percent => progress.style.width = Math.min(percent, 100) + '%',
 		end: () => {
-			if (container) {
+			if (progress) {
 				p.set(100);
 				setTimeout(() => {
-					container.remove();
-					container = progress = null;
+					progress.remove();
+					progress = null;
 				}, 600);
 			}
 		}
@@ -90,8 +90,7 @@ const layout = getCookie('rllayout');
 doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout || (!layout && 1000 > innerWidth));
 
 let pStep = 0,
-	container = eId('progressjs'),
-	progress = container.querySelector('.progressjs-inner'),
+	progress = eId('progressjs'),
 
 	RL_APP_DATA = {};
 

snappymail/v/0.0.0/app/templates/Index.html

@@ -41,7 +41,7 @@
 		</div>
 		<div id="rl-templates"></div>
 	</div>
-	<div id="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
+	<div id="progressjs"><div></div></div>
 	<script type="text/javascript">{{BaseAppBootScript}}</script>
 </body>