如何使用CSS显示进度条的块 [英] How to show blocks for progressbar using CSS

问题描述

我的网页上有100％的宽度。
现在我需要显示块到< div> ，就像windows progressbar有人能告诉我如何在我的div中创建这些块？

看起来像这样：

.sub-block 的百分比宽度即可更改加载栏进度。

 < div class =mainstyle =border：solid; background-color：white; width：500px; height：25px;> 
< div class =sub-blockstyle =background：url（'http://i.imgur.com/PRBmb4s.png'）; width：30％; height：25px; >< / DIV> 
< / div> 
  

I have a div with 100% width on my page. Now I need to show blocks into a <div> just like windows progressbar can anyone tell how I can create those blocks in the my div?

Looks like this:

解决方案

I copied @Anshuman Dwibhashi answer, but I changed the background to a piece of the image you posted. Now you just increase or decrease the percentage width of .sub-block to change the load bar progress.

<div class="main" style="border:solid;background-color:white;width:500px;height:25px;">
    <div class="sub-block" style="background:url('http://i.imgur.com/PRBmb4s.png');width:30%;height:25px;" ></div>
</div>

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