html - 如何使用 CSS 显示进度条的块

Question

我的页面上有一个宽度为 100% 的 div。现在我需要将块显示为<div>就像 Windows 进度条一样，谁能告诉我如何在我的 div 中创建这些块？

看起来像这样：

Answer 1

我复制了@Anshuman Dwibhashi 的答案，但我将背景更改为您发布的一张图片。现在您只需增加或减少百分比宽度.sub-block即可更改加载条进度。

<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>

Answer 2

像这样

演示

CSS

  .progress-striped .bar {
    background-color: #149BDF;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress .bar {
    -moz-box-sizing: border-box;
    background-color: #0E90D2;
    background-image: linear-gradient(to bottom, #149BDF, #0480BE);
    background-repeat: repeat-x;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 100%;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    transition: width 0.6s ease 0s;
    width: 0;
}
.progress {
    background-color: #F7F7F7;
    background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
    background-repeat: repeat-x;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.progress-striped .bar {
    background-color: #149BDF;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
    background-color: #62C462;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

Answer 3

创建该块的图像文件并将其用作进度内部元素的背景。给背景重复-x。

例如：

 background: url("Block.png") left top repeat-x transparent;

进一步阅读：

• http://css-tricks.com/css3-progress-bars/

• 带有 HTML 和 CSS 的进度条

• 使用 HTML5 创建和设置进度条

Answer 4

尝试这个：

演示

CSS

.main {
    border: solid;
    background-color: white;
    width: 500px;
    height: 25px;
}
.sub-block {
    background-color: green;
    display:inline-block;
    width: 20px;
    height: 25px;
}

HTML

<div class="main" >
<div class="sub-block" ></div>
</div>

根据您的需要添加更多数量的子块；

Answer 5

在您的 HTML 中

<div class="block-container">
<div class="sub-block" ></div>
<div class="sub-block" ></div>
<div class="sub-block" ></div>
.
.
.
</div>

在你的 css 文件中

.block-container
{
background-color:white;
width: 500px;
height: 25px;
}

.sub-block {
background-color: green;
width: 20px;
height: 25px;
padding-left: 3px;
}

或者

<div class='fix size'>
<div style="width:100%;">
<div>
10 sub-div 10% each
</div>
</div>
</div>