使用CSS3反转进度条 [英] Reverse progressbar using CSS3

问题描述

我有此

I have this EXAMPLE.

I want to reverse the progress bar 180 degree to progress from right to left. To obtain something like this :

I tried to change the transition attribute but no result.

Code :

.progress-bar span {
        display: inline-block;
        height: 100%;
        background-color: #777;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        transition: width .4s ease-in-out;      
}

解决方案

Make the progress bar block and just float it to the right:

.progress-bar span {
    display: block;
    float: right;
    ...
}

DEMO

这篇关于使用CSS3反转进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！