/
githubmirror
/
bootstrap
Обзор
Документация
Войти
/
githubmirror
/
bootstrap
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
scss/_placeholders.scss
63 строки
1 KB
Julien Déramond
Guard placeholder glow/wave animations behind prefers-reduced-motion (#42769)
28 июл 2026, 23:54
Не верифицирован
28 июл 2026, 23:54
6177d5f
Код
Авторство
О чём код?
.placeholder { display: inline-block; min-height: 1em; vertical-align: middle; cursor: wait; background-color: currentcolor; opacity: $placeholder-opacity-max; &.btn::before { display: inline-block; content: ""; } } // Sizing .placeholder-xs { min-height: .6em; } .placeholder-sm { min-height: .8em; } .placeholder-lg { min-height: 1.2em; } // Animation .placeholder-glow { .placeholder { animation: placeholder-glow 2s ease-in-out infinite; @if $enable-reduced-motion { @media (prefers-reduced-motion: reduce) { animation: none; } } } } @keyframes placeholder-glow { 50% { opacity: $placeholder-opacity-min; } } .placeholder-wave { mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); mask-size: 200% 100%; animation: placeholder-wave 2s linear infinite; @if $enable-reduced-motion { @media (prefers-reduced-motion: reduce) { animation: none; } } } @keyframes placeholder-wave { 100% { mask-position: -200% 0%; } }