CODEWITHSUNDEEP
htmlcss
zuyi
zuyi

Reputation: 489

Progress indicator starts from outside the progress bar

The progress indicator which is at the extreme left starts from outside the progress bar initially, it gets into correct position if i remove the right: -10%; but then the progress indicator does not move when I change the width in the inline css of the pro-bar. How to fix this. 

.progress_bar{
    height: 15px;
    background-color:grey;
    border-radius:15px;
    box-shadow:0 4px 7px -5px #000 inset;
}
.progress_bar:first-child{
    margin: 50px 0;
}
.progress_bar .pro-bar{
    position: relative;
    height: 100%;
    box-shadow: 0 1px 11px -4px #fff inset;
    border-radius:15px;
    animation: animate-positive 4s;
}
.progress_bar .pro-bar > span{
    background: linear-gradient(to top, #3d4131 35%, #fff 233%);
    color: #a5a5a4;
    box-shadow: 1px 1px  3px #1d1a1f;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    top: -37px;
    right: -10%;
    padding: 4px 10px;
    border-radius: 3px 3px 3px 0px;
}
.progress_bar .pro-bar > span:after{
    content: "";
    border-top: 6px solid #3d4131;
    border-right: 6px solid transparent;
    position: absolute;
    bottom: -6px;
    left:0;
}
.pro-bar {
   background: linear-gradient(to right,#d98164 35%,#a9b487 68%);
}
<div class="row">
<div class="col-xs-9 progress-container">

        <div class="col-md-6">
            <div class="progress_bar">
                <div class="pro-bar" style="width: 0%">
                    <span>0%</span>
                </div>
            </div>
 
        </div>
    </div>
</div>

Upvotes: 0

Views: 76

Answers (1)

akshay kishore
akshay kishore

Reputation: 1027

I think I've figured it out, please try 

left: 100%;

instead of the right: -10%;

Upvotes: 1

Related Questions