so, i made a simple animated progress bar in jQuery. you can view it here.

I need some code in this post, so here's my CSS:

.progress {
  height: 14px;
  width: 300px;
  background: #111;
  border-radius: 5px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: white;        
}

.filename {
  font-size: 10px;
  color: white;
  position: relative;
}

.progresstop {  
  padding: 4px;
  width: 40px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; 
  height: 8px;
  float: left;
  background: #c44639;
  vertical-align: middle;
  display: inline-block;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-style: solid;
  background: #111;
  border-width: 7px 7px 7px ;
  border-color: transparent transparent transparent #c44639;
  float: left;
  display: inline-block;
}

my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're pletely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?

so, i made a simple animated progress bar in jQuery. you can view it here.

I need some code in this post, so here's my CSS:

.progress {
  height: 14px;
  width: 300px;
  background: #111;
  border-radius: 5px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: white;        
}

.filename {
  font-size: 10px;
  color: white;
  position: relative;
}

.progresstop {  
  padding: 4px;
  width: 40px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; 
  height: 8px;
  float: left;
  background: #c44639;
  vertical-align: middle;
  display: inline-block;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-style: solid;
  background: #111;
  border-width: 7px 7px 7px ;
  border-color: transparent transparent transparent #c44639;
  float: left;
  display: inline-block;
}

my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're pletely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?

• javascript
• jquery
• html
• css

• One thing to mention, there is not need to have display: inline-block; and float: left; on the same element. Unless there is some reason for that? – Josh Powell Commented Nov 26, 2013 at 20:07
• @JoshPowell I have seen the same thing many times in the past. If it's done on purpose it might be because IE7 doesn't support inline-block, therefore it may serve as a fallback? Just a guess, though I don't know if it supports floats either.. – Josh Crozier Commented Nov 26, 2013 at 20:09
• @JoshC Hmm that is worth looking into. I'm not one who supports IE7 but it would be a good thing to keep in mind if I ever have to. – Josh Powell Commented Nov 26, 2013 at 20:16
• there's no reason, it's just that i'm still pretty new to web development so my css development philosophy is basically "add properties without pletely understanding what they do, until it looks right". haha. – amagumori Commented Nov 28, 2013 at 2:19

2 Answers 2

Altenatively to JoshC's answer,

you could wrap it in a container like this fiddle

HTML

<div id="progress-container">
    <div class='progress'>
        <div class='progresstop'></div>
        <div class='arrow-right'></div>
        <div class='filename'>FILENAME</div>
    </div>
</div>

CSS

#progress-container {
    height: 14px;
    width: 300px;
    background: #111;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    color: white;
}

.progress {
    height: 14px;
    width: 500px; /* large value */
}

Just make sure that the .progess width is larger than what you need (text, arrow, and bar)

You are looking for white-space: pre.

Here is an updated example - it works how you want it to now.

.filename {
    white-space: pre;
}

EDIT

If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:

jsFiddle example - less HTML now, since the arrow is a pseudo element.

HTML

<div class='progress'>
    <div class='progresstop'></div>
    <div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
    <div class='filename'>FILENAME</div>
</div>

CSS

.filename:before {
    content:"\A";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 7px 7px;
    border-color: transparent transparent transparent #c44639;
    position:absolute;
}