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