/
githubmirror
/
zulip
Обзор
Документация
Войти
/
githubmirror
/
zulip
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
web/styles/progress_bar.css
57 строк
1 KB
Anders Kaseorg
stylelint: Enable stylelint-high-performance-animation.
24 окт 2024, 00:56
24 окт 2024, 00:56
2671a5c
Код
Авторство
О чём код?
@keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background: linear-gradient(to bottom, hsl(0deg 0% 96%), hsl(0deg 0% 98%)); background-repeat: repeat-x; box-shadow: inset 0 1px 2px hsl(0deg 0% 0% / 10%); border-radius: 4px; } .progress .bar { width: 0%; height: 100%; color: hsl(0deg 0% 100%); float: left; background: linear-gradient( to bottom, hsl(200deg 84% 48%), hsl(200deg 96% 38%) ); background-repeat: repeat-x; box-shadow: inset 0 -1px 2px hsl(0deg 0% 0% / 15%); box-sizing: border-box; transition: width 0.6s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */ } .progress.active .bar { animation: progress-bar-stripes 2s linear infinite; } .progress .bar-danger { background: linear-gradient( to bottom, hsl(2deg 81% 65%), hsl(3deg 57% 49%) ); background-repeat: repeat-x; } .progress .bar-success { background: linear-gradient( to bottom, hsl(120deg 45% 58%), hsl(120deg 32% 50%) ); background-repeat: repeat-x; }