Loading animation (#5362)

assets/css/abstracts/_mixins.scss

@@ -12,41 +12,65 @@ $fontSizes: (
 	font-size: map-get($fontSizes, $sizeName) * $multiplier;
 }
 
-@keyframes loading-fade {
+@keyframes spinner__animation {
 	0% {
-		opacity: 0.7;
+		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
+		transform: rotate(0deg);
 	}
-	50% {
-		opacity: 1;
+	100% {
+		transform: rotate(360deg);
 	}
+}
+
+@keyframes loading__animation {
 	100% {
-		opacity: 0.7;
+		transform: translateX(100%);
 	}
 }
 
 // Adds animation to placeholder section
 @mixin placeholder() {
-	animation: loading-fade 1.2s ease-in-out infinite;
-	background-color: $placeholder-color !important;
-	color: $placeholder-color !important;
 	outline: 0 !important;
 	border: 0 !important;
-	box-shadow: none;
+	background-color: #ebebeb !important;
+	color: transparent !important;
+	width: 100%;
+	border-radius: 0.25rem;
+	display: block;
+	line-height: 1;
+	position: relative !important;
+	overflow: hidden !important;
+	max-width: 100% !important;
 	pointer-events: none;
-	max-width: 100%;
+	box-shadow: none;
+	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
 
 	// Forces direct descendants to keep layout but lose visibility.
 	> * {
 		visibility: hidden;
 	}
 
+	&::after {
+		content: " ";
+		display: block;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 100%;
+		background-repeat: no-repeat;
+		background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb);
+		transform: translateX(-100%);
+		animation: loading__animation 1.5s ease-in-out infinite;
+	}
+
 	@media screen and (prefers-reduced-motion: reduce) {
 		animation: none;
 	}
 }
 
 @mixin force-content() {
-	&::after {
+	&::before {
 		content: "\00a0";
 	}
 }

assets/js/base/components/spinner/style.scss

@@ -22,16 +22,6 @@
 		border-radius: 50%;
 		border: 0.2em solid currentColor;
 		border-left-color: transparent;
-		animation: wc-block-components-spinner__animation 1s infinite linear;
-	}
-}
-
-@keyframes wc-block-components-spinner__animation {
-	0% {
-		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
+		animation: spinner__animation 1s infinite linear;
 	}
 }