html - Bar fill and Bar unfilled doesn't ovelap -
i trying create css progress bar reason unfill part (white background) doesn't overlap green background fill part.
any idea how make that?
also browser should or not work since @keyframe css3?
css:
.container{ width: 400px; margin: 0 auto; } .bar{ width: 100%; background: #141414; padding: 17px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .bar-fill{ height: 15px; display: block; background: #45c9a5; width: 0%; border-radius: 8px; -webkit-transition: width 0.8s ease; transition: width 0.8s ease; -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite; } .bar-unfill{ height: 15px; display: block; background: #fff; width: 100%; border-radius: 8px; } /* chrome, safari, opera */ @-webkit-keyframes mymove { {width: 0%;} {width: 100%;} } /* standard syntax */ @keyframes mymove { {width: 0%;} {width: 100%;} } .title{ background: #545965; color: #fff; padding: 15px; float: left; position: relative; right: 60px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
here jsfiddle: https://jsfiddle.net/xdbb3ypc/1/
thanks!
please provide jsfiddle also
just position 'filled' part inside 'unfilled', ie that:
<div class="container"> <div class="title">testing</div> <div class="bar"> <span class="bar-unfill"> <span class="bar-fill"></span> </span> </div> </div>
Comments
Post a Comment