jiaojiu/node_modules/vue-awesome-mui/mui/sass/progressbar.scss

/* === 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);
    }
}