CSS垂直进度条 [英] CSS Vertical Progress Bar
问题描述
垂直进度栏
此栏的正确样式需要：
-
进度条必须由包含多个交叉条的元素覆盖。
-
没有图片（即使用横线图片）。
-
进度栏必须附加到原始图片底部，并向上延伸。
-
最重要的是，进度条的包装器宽度必须保持动态（％），而不是静态定义。
- CSS解决方案最好，但JQuery是公平的游戏。
img src =https://i.stack.imgur.com/m7qTe.jpgalt =enter image description here>
进度栏HTML：
< div class =container>
< div class =attendance>
< p class =title> attendance< / p>
< div class =attendance-bar>
< div class =attendance-level>< / div>
< div class =attendance-cage-css>
< div class =crossbar-1>< / div>
< div class =crossbar-2>< / div>
< div class =crossbar-3>< / div>
< div class =crossbar-4>< / div>
< div class =crossbar-5>< / div>
< div class =crossbar-6>< / div>
< div class =crossbar-7>< / div>
< div class =crossbar-8>< / div>
< div class =crossbar-9>< / div>
< / div>
< / div>
< / div>
< / div>
JS Fiddle包括HTML标记&所有CSS类：
我的进度：
奖金：
以便实现上面所示的它们之间的增加的余量。如果你知道如何实现没有类的效果，赞成。
接受挑战！ / strong>
我带了你的小提琴，创建了 此 。这是一个非常简单的演示，你可以用它做什么。你点击点击我，它从5px到200px。当然，你可以让它增加一定数量的每一次。这只是它，虽然，我刚刚在这里发布了一些我做的更改，完整代码位于jsfiddle
更新： 此 每次点击时都会增加5px。当然，您需要告诉它停止，否则它会永远继续。
< div class =container>
< div class =attendance>
< p class =title> ATTENDANCE< / p>
< div class =attendance-bar>
< div class =attendance-level>
< div class =bar-1>< / div>
< div class =bar-2>< / div>
< div class = bar-3>< / div>
< div class =bar-4>< / div>
< div class =bar-5>< / div>
< div class =bar-6>< / div>
< div class =bar-7>< / div>
< div class =bar-8>< / div>
< div class =bar-9>< / div>
< / div>
< div class =attendance-cage-css>< / div>
< / div>
< / div>
< / div>
< div id =changeattstyle =top：50px; left：200px; position：absolute>点击我< / div>
CSS
.container {
width：100px;
height：350px;
position：absolute;
}
.attendance-bar {
float：left;
width：90％;
margin：0px 5％0px 5％;
height：260px;
background-color：＃2f2f2f;
}
.attendance-cage-css {
width：80px;
float：left;
background-color：＃6ae719;
height：5px;
position：absolute;
bottom：20px;
z-index：1;
}
.bar-1，.bar-2，.bar-3，.bar-4，.bar-5，.bar-6，.bar-7，.bar -8，.bar-9 {
float：left;
width：100％;
background-color：＃1f1f1f;
height：10px;
z-index：9999;
}
.attendance-level {
float：left;
height：100px;
width：80px;
z-index：9999;
position：absolute;
top：60px;
}
JQuery
$（'＃changeatt'）。click（function（）{
$（'。attendance-cage-css'）。css '，'200px'）;
}）;
更新
如果您想要最大高度，推荐下面的东西。它将检查以确保进度栏的高度不超过进度栏容器的高度。
if（$ '.attendance-cage-css'）。height（）< $（'。attendance-bar'）。height（））{
$（'。attendance-cage-css'）。css '，$（'。attendance-cage-css'）。height（）+ 5）;
}
注意：如果您希望条形图达到最大高度，容器的高度是你增加进度条的倍数。例如，如果您将条形图增加5px，那么容器的高度应为260px，265px等。
Vertical Progress Bar
The proper styling of this bar requires:
the progress bar must be covered by an element holding a number of cross-bars.
no images (i.e. using an image of the cross bars).
the progress bar must be attached to the bottom of the origin, and extend upward.
most importantly, the progress bar's wrapper width must remain dynamic (%), not defined statically.
the bar's width stretches depending on the width of its container component
A pure CSS solution is best, but JQuery is fair game.
Progress Bar HTML:
<div class="container">
<div class="attendance">
<p class="title">attendance</p>
<div class="attendance-bar">
<div class="attendance-level"></div>
<div class="attendance-cage-css">
<div class="crossbar-1"></div>
<div class="crossbar-2"></div>
<div class="crossbar-3"></div>
<div class="crossbar-4"></div>
<div class="crossbar-5"></div>
<div class="crossbar-6"></div>
<div class="crossbar-7"></div>
<div class="crossbar-8"></div>
<div class="crossbar-9"></div>
</div>
</div>
</div>
</div>
JS Fiddle including HTML markup & all CSS classes:
My Progress:
Bonus:
I've implemented unique classes for each crossbar in order to achieve the increasing margins between them shown above. Thumbs up if you know how to achieve the effect without the classes. Show it in your JS Fiddle.
Challenge accepted!
I took your fiddle and created this from it. It's a very simple demonstration of what you can do with it. You click the "Click me and it goes from 5px to 200px. Of course you can make it so that it increments by a certain number everytime. This is the just of it though. I just posted on here some of the changes I made, the full code is on the jsfiddle
Update: this one goes up by 5px everytime you click it. Of course you'd need to tell it went to stop, otherwise it'd go on forever.
<div class="container">
<div class="attendance">
<p class="title">ATTENDANCE</p>
<div class="attendance-bar">
<div class="attendance-level">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
</div>
<div class="attendance-cage-css"></div>
</div>
</div>
</div>
<div id="changeatt" style="top:50px; left: 200px; position: absolute">Click me</div>
CSS
.container{
width:100px;
height:350px;
position: absolute;
}
.attendance-bar{
float:left;
width:90%;
margin:0px 5% 0px 5%;
height:260px;
background-color:#2f2f2f;
}
.attendance-cage-css{
width:80px;
float:left;
background-color:#6ae719;
height:5px;
position: absolute;
bottom: 20px;
z-index: 1;
}
.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
float:left;
width:100%;
background-color:#1f1f1f;
height:10px;
z-index: 9999;
}
.attendance-level{
float:left;
height:100px;
width:80px;
z-index: 9999;
position: absolute;
top:60px;
}
JQuery
$('#changeatt').click(function(){
$('.attendance-cage-css').css('height', '200px');
});
Update If you want a max height, I would recommend something like below. It will check to make sure the height of the progress bar does not exceed that of the progress bar container.
if($('.attendance-cage-css').height() < $('.attendance-bar').height()){
$('.attendance-cage-css').css('height', $('.attendance-cage-css').height() + 5);
}
Note: If you want the bar to reach max height, you must make the height of the container a multiple of which you are increasing the progress bar. For example, if you are increasing the bar by 5px then the height of the container should be 260px, 265px, etc.
这篇关于CSS垂直进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
