fix(ui5-busy-indicator): correct appearance in Belize theme

Fixes: #7901
SAP · Jan 4, 2024 · 41acd88 · 41acd88
1 parent 4237771
commit 41acd88
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 20 deletions.
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -92,7 +92,7 @@
 .ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
-    border-radius: var(--_ui5_busy_indicator_focus_border_radius);
+	border-radius: var(--_ui5_busy_indicator_focus_border_radius);
 }
 
 .ui5-busy-indicator-circles-wrapper {
@@ -101,29 +101,49 @@
 
 .ui5-busy-indicator-circle {
 	display: inline-block;
-	background-color: currentColor;
 	border-radius: 50%;
+	position: relative;
+	animation: busyAnimation_standard 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
 }
 
 .ui5-busy-indicator-circle::before {
 	content: "";
 	width: 100%;
 	height: 100%;
-	border-radius: 100%;
+	border-radius: 50%;
+	box-shadow: inset 0px 0px 2px 1px var(--_ui5_busy_indicator_color);
+	position: absolute;
+	left: 0;
+	top: 0;
+	box-sizing: border-box;
+}
+
+.ui5-busy-indicator-circle::after {
+	content: "";
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	background-color: currentColor;
+	position: absolute;
+	left: 0;
+	top: 0;
+	box-sizing: border-box;
+	animation: busyAnimation_standard_background 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
 }
 
-.circle-animation-0 {
-	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+.circle-animation-0,
+.circle-animation-0::after {
+	animation-delay: -0.32s;
 }
 
-.circle-animation-1 {
-	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
-	animation-delay: 200ms;
+.circle-animation-1,
+.circle-animation-1::after {
+	animation-delay: -0.16s;
 }
 
-.circle-animation-2 {
-	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
-	animation-delay: 400ms;
+.circle-animation-2,
+.circle-animation-2::after {
+	animation-delay: 0s;
 }
 
 .ui5-busy-indicator-text {
@@ -132,15 +152,20 @@
 	text-align: center;
 }
 
-@keyframes grow {
-	0%, 50%, 100% {
-		-webkit-transform: scale(0.5);
-		-moz-transform: scale(0.5);
-		transform: scale(0.5);
+@keyframes busyAnimation_standard {
+	0%, 80%, 100% {
+		transform: scale(0.4);
 	}
-	25% {
-		-webkit-transform: scale(1);
-		-moz-transform: scale(1);
+	40% {
 		transform: scale(1);
 	}
 }
+
+@keyframes busyAnimation_standard_background {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.1;
+	}
+}
diff --git a/packages/main/src/themes/sap_belize/BusyIndicator-parameters.css b/packages/main/src/themes/sap_belize/BusyIndicator-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_color: #00a4eb;
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";