Ayan Ayan - 2 months ago 5
CSS Question

Adding a progress bar behind a floating div in a li element

I am designing a very basic file listing layout in HTML and CSS. Although its working but I would like to know if the following code could be improved upon so that its more good and follows the best practices. I am looking forward of supporting I.E 9+ too. Plus I would like to add a progress bar behind the

left-wing
. In other words I would like to show download progress behind the filename and time as a whole.

I am showing only the part I would like to review.

HTML

<div id="list-content">
<ul id="file_list">
<li>
<div class="f_icon"><img src="images/Docs-icon.png"></div>
<div class="left_wing">
<div class="f_name">File name Short and loooooooooooong.ext</div>
<div class="f_time">Sep 08, 2016</div>
</div>
<div class="right_wing">
<div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
<div class="f_size">34.50 MB</div>
</div>
</li>

<li>
<div class="f_icon"><img src="images/Docs-icon.png"></div>
<div class="left_wing">
<div class="f_name">File name Short.ext</div>
<div class="f_time">Sep 08, 2016</div>
</div>
<div class="right_wing">
<div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
<div class="f_size">34.50 MB</div>
</div>
</li>
</ul>
</div>


CSS

#list-content
{
margin:auto;
margin-top: 5%;
left: 0;
right: 0;
overflow-y: auto;
position: absolute;
width: 90%;
height: calc(95% - 105px);
}
#file_list
{
width: 100%;
}
#file_list li
{
overflow: hidden;
padding-top: 4px;
padding-bottom: 4px;
}
.f_icon
{
width: 10%;
float: left;
text-align: center;
}
.f_icon img
{
width: 32px;
height: 32px;
display: block;
}
.left_wing
{
width: 50%;
float: left;
}
.f_name
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
color: #FFFFFF;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.f_time
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
font-style: italic;
color: cornflowerblue;
padding-top: 2px;
}
.right_wing
{
width: 40%;
float: right;
margin-top: 6px;
}
.f_size
{
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
color: #FFFFFF;
}
.f_delete
{
float: right;
font-family: 'Source Sans Pro', sans-serif;
color: #B10002;
margin-left: 15px;
margin-right: 4px;
}


PROBLEM

For the progress bar I had tried something like the code below but it seems that padding of the overlying text and the progressbar doesnt look good plus
width: 50%;
doesn't seem like 50%.

HTML

<div class="left_wing">
<div class="progressbar"></div>
<div class="f_name">File name Short and loooooooooooong.ext</div>
<div class="f_time">Sep 08, 2016</div>
</div>


CSS

.progressbar
{
height: 30px;
position: fixed;
width: 50%; /*Testing purpose only*/
}

Answer

something like that ?

#list-content {
  margin: auto;
  margin-top: 5%;
  left: 0;
  right: 0;
  overflow-y: auto;
  position: absolute;
  width: 90%;
  height: calc(95% - 105px);
}
#file_list {
  width: 100%;
}
#file_list li {
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
.f_icon {
  width: 10%;
  float: left;
  text-align: center;
}
.f_icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.left_wing {
  position: relative;
  width: 50%;
  float: left;
}
.f_name
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.f_time
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: cornflowerblue;
    padding-top: 2px;
}
.f_name,
.f_time {
  z-index: 3;
  font-size: 1em;
}
.progressbar {
  height: 3.2em;
  position: absolute;
  top: -0.1em;
  left: -0.1em;
  animation-name: load;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background: lightgray;
  z-index: -1;
  /*Testing purpose only*/
}
@keyframes load {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
<div id="list-content">
  <ul id="file_list">
    <li>
      <div class="f_icon">
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
      </div>
      <div class="left_wing">
        <div class="progressbar"></div>
        <div class="f_name">File name Short and loooooooooooong.ext</div>
        <div class="f_time">Sep 08, 2016</div>
      </div>
      <div class="right_wing">
        <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i>
        </div>
        <div class="f_size">34.50 MB</div>
      </div>
    </li>
  </ul>
</div>

Comments