diff --git a/images/chromium-headful/client/src/assets/images/logo.svg b/images/chromium-headful/client/src/assets/images/logo.svg index db48cb98..3bef6743 100644 --- a/images/chromium-headful/client/src/assets/images/logo.svg +++ b/images/chromium-headful/client/src/assets/images/logo.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/images/chromium-headful/client/src/components/about.vue b/images/chromium-headful/client/src/components/about.vue index 32a51610..1611b8d1 100644 --- a/images/chromium-headful/client/src/components/about.vue +++ b/images/chromium-headful/client/src/components/about.vue @@ -4,6 +4,9 @@
+
+
+
@@ -73,18 +76,31 @@ } .loader { - width: 90px; - height: 90px; position: relative; margin: 0 auto 20px auto; display: flex; + flex-direction: column; justify-content: center; align-items: center; + gap: 20px; .kernel-logo { - width: 100%; + width: 90px; + height: 90px; + } + + .loading-bar { + width: 128px; + height: 1px; + background: rgba(255, 255, 255, 0.12); + overflow: hidden; + } + + .loading-bar-fill { + width: 40%; height: 100%; - animation: kernel-logo-pulse 1.5s ease-in-out infinite; + background: rgba(255, 255, 255, 0.85); + animation: kernel-bar-slide 1.2s ease-in-out infinite; } } } @@ -95,15 +111,12 @@ } } - @keyframes kernel-logo-pulse { - 0%, - 100% { - transform: scale(0.85); - opacity: 0.7; + @keyframes kernel-bar-slide { + 0% { + transform: translateX(-100%); } - 50% { - transform: scale(1); - opacity: 1; + 100% { + transform: translateX(350%); } } diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue index 43d81af1..4da7e019 100644 --- a/images/chromium-headful/client/src/components/connect.vue +++ b/images/chromium-headful/client/src/components/connect.vue @@ -3,6 +3,9 @@
+
+
+
@@ -46,32 +49,42 @@ } .loader { - width: 90px; - height: 90px; position: relative; margin: 0 auto; display: flex; + flex-direction: column; justify-content: center; align-items: center; + gap: 20px; .kernel-logo { - width: 100%; + width: 90px; + height: 90px; + } + + .loading-bar { + width: 128px; + height: 1px; + background: rgba(255, 255, 255, 0.12); + overflow: hidden; + } + + .loading-bar-fill { + width: 40%; height: 100%; - animation: kernel-logo-pulse 1.5s ease-in-out infinite; + background: rgba(255, 255, 255, 0.85); + animation: kernel-bar-slide 1.2s ease-in-out infinite; } } } } - @keyframes kernel-logo-pulse { - 0%, - 100% { - transform: scale(0.85); - opacity: 0.7; + @keyframes kernel-bar-slide { + 0% { + transform: translateX(-100%); } - 50% { - transform: scale(1); - opacity: 1; + 100% { + transform: translateX(350%); } }