coreui / coreui-pro / 38246321501

96%

main: 94%

push

github

feat(Placeholder): sweeping wave, pulse animation and lighter, rounded bars (#1616)

.placeholder-wave was a wide 130deg gradient that crossed the bars every
2s and read the same opacity token as the pulse. It is now a narrow
highlight band, 110deg, every 1.6s, with its own
--cui-placeholder-wave-opacity-max and -min declared on .placeholder-wave,
and the band lies outside the box at both ends of the cycle, so the loop
has no seam. With reduced motion it drops its mask as well as the
animation. The docs recommend it for loading and show it on text.

The opacity pulse is .placeholder-pulse; .placeholder-glow stays as an
alias, and the keyframes are renamed to placeholder-pulse.

Placeholders are paler (resting opacity .18, pulse .1; were .5 and .2),
taller (1.25em, and .75em, 1em and 1.75em for xs, sm and lg; were 1em, .6em,
.8em and 1.2em) and get a --cui-radius-3 corner. The default height is
capped a quarter em below the line height, so a placeholder never makes a
heading or a tight line taller, and the height and corner sit on
:where(.placeholder), so a button, avatar, badge or chip that takes the
class as a modifier keeps its own. The base tokens are declared on
.placeholder only, since the wave no longer reads them.

A visual spec covers the line heights, the corner, a modified button and
avatar, and the pulse under both class names.

7753 of 8338 branches covered (92.98%)

Branch coverage included in aggregate %.

13356 of 13653 relevant lines covered (97.82%)

1639.34 hits per line