feat(design): update loading icon animation and style (#2759)

graycoreio · Feb 20, 2024 · 9159554 · 9159554
1 parent de45407
commit 9159554
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 44 deletions.
diff --git a/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.component.html b/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.component.html
@@ -4,4 +4,8 @@
   <daff-radio formControlName="color" value="primary">Primary</daff-radio>
   <daff-radio formControlName="color" value="secondary">Secondary</daff-radio>
   <daff-radio formControlName="color" value="tertiary">Tertiary</daff-radio>
+  <daff-radio formControlName="color" value="black">Black</daff-radio>
+  <daff-radio formControlName="color" value="white">White</daff-radio>
+  <daff-radio formControlName="color" value="theme">Theme</daff-radio>
+  <daff-radio formControlName="color" value="theme-contrast">Theme Contrast</daff-radio>
 </daff-radio-set>
diff --git a/libs/design/loading-icon/src/loading-icon-theme.scss b/libs/design/loading-icon/src/loading-icon-theme.scss
@@ -12,48 +12,64 @@
 	$black: core.daff-map-deep-get($theme, 'core.black');
 
 	.daff-loading-icon {
-		circle {
+		&__loader {
 			stroke: currentColor;
 		}
 
+		&__bg {
+			stroke: rgba($black, 0.08);
+		}
+
 		&.daff-primary {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: theming.daff-color($primary);
 			}
+
+			.daff-loading-icon__bg {
+				stroke: rgba(theming.daff-color($primary), 0.08);
+			}
 		}
 
 		&.daff-secondary {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: theming.daff-color($secondary);
 			}
+
+			.daff-loading-icon__bg {
+				stroke: rgba(theming.daff-color($secondary), 0.08);
+			}
 		}
 
 		&.daff-tertiary {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: theming.daff-color($tertiary);
 			}
+
+			.daff-loading-icon__bg {
+				stroke: rgba(theming.daff-color($tertiary), 0.08);
+			}
 		}
 
 		&.daff-theme {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: $base;
 			}
 		}
 
 		&.daff-theme-contrast {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: $base-contrast;
 			}
 		}
 
 		&.daff-black {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: $black;
 			}
 		}
 
 		&.daff-white {
-			circle {
+			.daff-loading-icon__loader {
 				stroke: $white;
 			}
 		}

diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.html b/libs/design/loading-icon/src/loading-icon/loading-icon.component.html
@@ -1,3 +1,4 @@
 <svg focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
-  <circle cx="50%" cy="50%" r="46"></circle>
+  <circle cx="50%" cy="50%" r="46" class="daff-loading-icon__bg"></circle>
+  <circle cx="50%" cy="50%" r="46" class="daff-loading-icon__loader"></circle>
 </svg>
diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
@@ -18,15 +18,23 @@ $angle: 270 - $max-percentage-fill * 360;
 	width: 100%;
 }
 
-circle {
-	animation: rotation linear, circle-animation linear;
-	animation-duration: 1000ms;
-	animation-iteration-count: infinite;
-	fill: transparent;
-	stroke-dasharray: $max-stroke-length 400;
-	stroke-linecap: round;
-	stroke-width: 5px;
-	transform-origin: center;
+.daff-loading-icon {
+	&__loader {
+		animation: rotation linear, circle-animation linear;
+		animation-duration: 1000ms;
+		animation-iteration-count: infinite;
+		fill: transparent;
+		stroke-dasharray: $max-stroke-length 400;
+		stroke-linecap: round;
+		stroke-width: 5px;
+		transform-origin: center;
+	}
+
+	&__bg {
+		fill: transparent;
+		stroke-linecap: round;
+		stroke-width: 5px;
+	}
 }
 
 @keyframes circle-animation {
@@ -53,30 +61,9 @@ circle {
 
 @keyframes rotation {
 	0% {
-		transform: rotate(-90deg);
-	}
-
-	50% {
-		transform: rotate(0deg);
-	}
-
-	50.1% { /* stylelint-disable-line scss/selector-nest-combinators */
-		transform: rotate(0deg);
-	}
-
-	75% {
-		transform: rotate(90deg);
-	}
-
-	75.5% { /* stylelint-disable-line scss/selector-nest-combinators */
-		transform: rotate(90deg);
-	}
-
-	99% {
-		transform: rotate(#{$angle}deg);
-	}
-
-	100% {
-		transform: rotate(#{$angle}deg);
-	}
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }