Merge branch 'main' into fix/4126-conditional-predicate

NEWS.md

@@ -1,5 +1,9 @@
 # shiny (development version)
 
+## New features and improvements
+
+* Small improvements to the default pulse busy indicator to better blend with any background. It's also now slightly smaller by default. (#4122)
+
 # shiny 1.9.1
 
 ## Bug fixes

srcts/extras/busy-indicators/busy-indicators.scss

@@ -64,15 +64,15 @@
     --shiny-pulse-background,
     linear-gradient(
       120deg,
-      var(--bs-body-bg, #fff),
+      transparent,
       var(--bs-indigo, #4b00c1),
       var(--bs-purple, #74149c),
       var(--bs-pink, #bf007f),
-      var(--bs-body-bg, #fff)
+      transparent
     )
   );
-  --_shiny-pulse-height: var(--shiny-pulse-height, 5px);
-  --_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);
+  --_shiny-pulse-height: var(--shiny-pulse-height, 3px);
+  --_shiny-pulse-speed: var(--shiny-pulse-speed, 1.2s);
 
   /* Color, sizing, & positioning */
   position: fixed;
@@ -85,6 +85,7 @@
   /* Animation */
   animation-name: busy-page-pulse;
   animation-duration: var(--_shiny-pulse-speed);
+  animation-direction: alternate;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
 
@@ -130,17 +131,23 @@
 /* Keyframes for the pulsing banner */
 @keyframes busy-page-pulse {
   0% {
-    left: -75%;
-    width: 75%;
+    left: -14%;
+    right: 97%;
   }
-  50% {
-    left: 100%;
-    width: 75%;
+
+  45% {
+    left: 0%;
+    right: 14%;
   }
-  /* Go back */
-  100% {
-    left: -75%;
-    width: 75%;
+
+  55% {
+    left: 14%;
+    right: 0%;
+  }
+
+  to {
+    left: 97%;
+    right: -14%;
   }
 }