simplify pageloader animation

2 files changed, 21 insertions, 8 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 2a45388ac..ff0d156b5 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1717,3 +1717,20 @@ dl.bb-dl > dd > li {
 .disable-transition {
 	transition: none !important;
 }
+
+.page-loader {
+	z-index: 10000;
+	width: 20vw;
+	height: 3px;
+	position: absolute;
+	animation: pageloader_move 2s ease-out infinite;
+}
+
+@keyframes pageloader_move {
+	0% {
+		transform: translateX(0px);
+	}
+	50% {
+		transform: translateX(80vw);
+	}
+}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index b502ad333..706bf2808 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -26,14 +26,10 @@ $(document).ready(function() {
 	// provide a fake progress bar for pwa standalone mode
 	if (window.matchMedia('(display-mode: standalone)').matches) {
 		$(window).on('beforeunload', function(){
-			$('<div style="position:fixed; z-index:10000; height:2px;" class="bg-primary page-loader"></div>').prependTo('body');
-			let w = 10;
-			setInterval(function () {
-				$('.page-loader').css('width', w + 'vw');
-				if (w < 90) {
-					w = w+2;
-				}
-			}, 10);
+			if ($('.page-loader').length) {
+				return;
+			}
+			$('<div class="bg-primary page-loader"></div>').prependTo('body');
 		});
 	}