You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.9 KiB
116 lines
2.9 KiB
/* === Progress Bar === */
|
|
.#{$namespace}progressbar {
|
|
height: 2px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: block;
|
|
background: #b6b6b6;
|
|
border-radius: 2px;
|
|
-webkit-transform-origin: center top;
|
|
transform-origin: center top;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
vertical-align: middle;
|
|
span {
|
|
width: 100%;
|
|
background: $primary-color;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
@include transform(translate3d(-100%,0,0));
|
|
@include transition(150ms);
|
|
}
|
|
// Infinite
|
|
&.#{$namespace}progressbar-infinite {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $primary-color;
|
|
@include transform(translate3d(0,0,0));
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
-webkit-animation: #{$namespace}progressbar-infinite 1s linear infinite;
|
|
animation: #{$namespace}progressbar-infinite 1s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
body>.#{$namespace}progressbar{
|
|
position: absolute;
|
|
left: 0;
|
|
// top: 0;
|
|
top: $bar-base-height;//默认应该在title bar下方显示
|
|
z-index: z("max");
|
|
border-radius: 0;
|
|
}
|
|
// Animations
|
|
.#{$namespace}progressbar-in {
|
|
-webkit-animation: #{$namespace}progressbar-in 300ms forwards;
|
|
animation: #{$namespace}progressbar-in 300ms forwards;
|
|
}
|
|
.#{$namespace}progressbar-out {
|
|
-webkit-animation: #{$namespace}progressbar-out 300ms forwards;
|
|
animation: #{$namespace}progressbar-out 300ms forwards;
|
|
}
|
|
|
|
@-webkit-keyframes #{$namespace}progressbar-in {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: scaleY(0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes #{$namespace}progressbar-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes #{$namespace}progressbar-out {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: scaleY(0);
|
|
}
|
|
}
|
|
@keyframes #{$namespace}progressbar-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
}
|
|
}
|
|
@-webkit-keyframes #{$namespace}progressbar-infinite {
|
|
0% {
|
|
-webkit-transform: translate3d(-50%, 0, 0) scaleX(0.5);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(100%, 0, 0) scaleX(0.5);
|
|
}
|
|
}
|
|
@keyframes #{$namespace}progressbar-infinite {
|
|
0% {
|
|
transform: translate3d(-50%, 0, 0) scaleX(0.5);
|
|
}
|
|
100% {
|
|
transform: translate3d(100%, 0, 0) scaleX(0.5);
|
|
}
|
|
} |