Question

我的页面上有一个宽度为100％的div。现在我需要在<div>中显示块，就像windows progressbar一样，任何人都可以告诉我如何在我的div中创建这些块？

看起来像这样：

enter image description here

Answer 1

喜欢这个

<强> DEMO

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

试试这个：

<强> DEMO

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 3

创建该块的图像文件，并将其用作progress内部元素的背景。给出背景repeat-x。

例如：

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

进一步阅读：

Answer 4

我复制了@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>

enter image description here

Answer 5

DEMO

最好和最短的方式

<progress value="80" max="100"></progress>

根据latest HTML5 working draft，progress标记最适合用于显示手头特定任务的进度。 meter最适用于与任务无关的工具，例如磁盘空间或内存使用情况。

progress元素表示完成任务的进度。

尽管

meter元素表示标量在已知范围内的测量，或a 分数值;例如磁盘用法，查询的相关性结果，或投票的一部分人口选择了一个特别候选人。

编辑 - 由于渲染和样式似乎是一个问题，您可能会有更多运气使用其他标签。例如，性感的进度导航器可以用以下代码编码：

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

并使用like this内容设置样式。

Answer 6

在您的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;
}

OR

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

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

看起来像这样：

6 个答案: