进度条的美化

Posted 2021-12-19 shenpeng

这里记录一种用css控制进度条美化的效果

css代码：

@-webkit-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-moz-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-ms-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-o-keyframes progress-bar-stripes 
    from 
        background-position: 0 0
    

    to 
        background-position: 40px 0
    


@keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    

.progress 
    display: block;
    width:600px;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#fff5f5f5‘,endColorstr=‘#fff9f9f9‘,GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)


.progress .bar 
    float: left;
    width: 80%;
    height: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top,#149bdf,#0480be);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));
    background-image: -webkit-linear-gradient(top,#149bdf,#0480be);
    background-image: -o-linear-gradient(top,#149bdf,#0480be);
    background-image: linear-gradient(to bottom,#149bdf,#0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff149bdf‘,endColorstr=‘#ff0480be‘,GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width .6s ease;
    -moz-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease


.progress-striped .bar 
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px


.progress.active .bar 
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite


.progress-danger.progress-striped .bar 
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)

html代码：

<span class="progress progress-danger progress-striped active">
    <span class="bar"></span>
</span>

实现效果：