/
githubmirror
/
atom
Обзор
Документация
Войти
/
githubmirror
/
atom
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/atom-dark-ui/styles/progress.less
69 строк
2 KB
David Wilson
:arrow_right: Migrate core package 'atom-dark-ui' into ./packages
24 сен 2018, 20:57
24 сен 2018, 20:57
871aba8
Код
Авторство
О чём код?
.loading-spinner(@size) { width: @size; height: @size; display: block; background-image: url(images/octocat-spinner-128.gif); background-repeat: no-repeat; background-size: cover; &.inline-block { display: inline-block; } } .loading-spinner-large { .loading-spinner(64px); } .loading-spinner-medium { .loading-spinner(50px); } .loading-spinner-small { .loading-spinner(32px); } .loading-spinner-tiny { .loading-spinner(20px); } // Much learning from: // http://css-tricks.com/html5-progress-element/ @progress-height: 16px; @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); progress { height: @progress-height; -webkit-appearance: none; border-radius: @component-border-radius; background-color: #666; background-image: -webkit-linear-gradient(-30deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), @progress-shine-gradient; border-radius: 2px; background-size: 25px @progress-height, 100% 100%, 100% 100%; -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage } progress::-webkit-progress-bar { background-color: transparent; } progress::-webkit-progress-value { border-radius: @component-border-radius; background-image: @progress-shine-gradient; background-color: @background-color-success; } progress[value] { background-image: @progress-shine-gradient; -webkit-animation: none; } @-webkit-keyframes animate-stripes { 100% { background-position: 100px 0px; } }