Visualizing maintenance status on the site list — blue pulsing border for running, green solid for done

When you're running maintenance across several WordPress sites in sequence, a list view with text-only status doesn't make "which site is being processed now" or "which ones are already done" easy to spot at a glance. A client put it plainly: " Make it visually obvious in the list which sites are in maintenance and which are finished. " A colored border is the obvious move, but there are real choices to make. What colors? Where do we get the state from? When does the "done" mark go away? And — can we ship this without touching the backend? This post walks through those four calls and the minimal frontend-only implementation we landed on. Color picking — "red flashing" was the first thing we ruled out How do you make the running site stand out? The intuitive answer is "blinking red," but that got cut early. Multi-site maintenance runs are long . Having something blink red somewhere on screen the whole time is a fatigue source. We went with "a gentle blue pulse + a solid green border" instead: Running : blue #2563eb border + a soft pulsing box-shadow (2.2s ease-in-out) Done (within 24h) : green #10b981 solid border + a faint inset shadow @keyframes site-running-pulse { 0 %, 100 % { box-shadow : 0 0 0 0 rgba ( 37 , 99 , 235 , 0.4 ); } 50 % { box-shadow : 0 0 0 6px rgba ( 37 , 99 , 235 , 0 ); } } .site-running { border-color : #2563eb !important ; animation : site-running-pulse 2.2s ease-in-out infinite ; } @media ( prefers-reduced-motion : reduce ) { .site-running { animation : none ; } /* respect OS-level reduced motion */ } .site-completed { border-color : #10b981 !important ; box-shadow : inset 0 0 0 1px rgba ( 16 , 185 , 129 , 0.25 ); } The prefers-reduced-motion: reduce rule stops the pulse for users who have reduced-motion enabled at the OS level (often people with vestibular sensitivity). If you're adding motion to grab attention, this is essentially required. Zero backend changes — reuse the existing log stream To tell the list UI "this site is being processed