css - 在进度条上叠加内容
问题描述
ul {
margin: 0;
padding: 0;
}
.progress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
li {
position: relative;
margin: 0;
padding: 0;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
<div>some header content</div>
<ul>
<li>
<div class="overlay">
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</div>
<progress class="progress"></progess>
</li>
<li>
<div class="overlay">
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</div>
<progress class="progress"></progess>
</li>
</ul>
<div>some footer content</div>
所以我想要做的是让列表元素的背景显示该列表项处理的进度。您可以做的是使用您选择的颜色的 1x1 像素图像并将其设置为背景图像。然后在进度更新时,将背景宽度设置为等于该进度值。
HTML5 现在有一个进度条元素,所以我想知道使用它来实现相同的样式有多难。到目前为止,这是我所拥有的最好的,而且非常挑剔。实际上有没有一种简单的方法来做我忽略的这样的事情?如果不是这样,在这种情况下,我最好按照上述老式方式进行操作。
这是最终目标类似于的示例。
let bgSize = 0;
function increaseWidth() {
bgSize++;
let elements = document.getElementsByTagName('li');
for(let i = 0; i < elements.length; i++) {
elements[i].style.backgroundSize = bgSize + '% 100%';
}
if(bgSize < 100) {
setTimeout(increaseWidth, 500);
}
}
setTimeout(increaseWidth, 500);
li {
background-image: url('https://i.imgur.com/xnhGEBj.jpg');
background-repeat: no-repeat;
background-size: 0%;
display: block;
border: 1px solid #000;
list-style-type: none;
}
ul {
margin: 0;
padding: 0;
}
<div>some header content</div>
<ul>
<li>
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</li>
<li>
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</li>
</ul>
<div>some footer content</div>
解决方案
试试这个:
JS
let bgSize = 0;
let timer = null;
function increaseProgressBar () {
bgSize++;
const elements = document.getElementsByTagName('progress');
for(let i = 0; i < elements.length; i++) {
elements[i].value = bgSize;
}
if(bgSize < 100) {
timer = setTimeout(increaseProgressBar, 500);
}else{
clearTimeout(timer);
timer = null;
}
}
timer = setTimeout(increaseProgressBar, 500);
CSS
ul {
margin: 0;
padding: 0;
li {
border: 1px solid #000;
display: block;
list-style-type: none;
position: relative;
progress {
left: 0;
position: absolute;
right: 0;
}
progress[value] {
appearance: none;
height: 100%;
width: 100%;
z-index: -1;
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: #fff;
}
}
}
}
HTML
<div>some header content</div>
<ul>
<li>
<span>some stuff</span>
<input/>
<progress value="0" max="100"></progress>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</li>
<li>
<span>some stuff</span>
<input/>
<progress value="0" max="100"></progress>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</li>
</ul>
<div>some footer content</div>
推荐阅读
- c# - Access difference Windows Service - User
- swift - PromiseKit:无法在 then 处理程序之间调用自定义代码
- javascript - 如何通过 chrome 上的 javascript 请求更多配额持久空间?
- c# - 在 Visual Studio 中调试异步 C#;按预期打破异常
- redhat - 在 vSphere 上的 RHEL 虚拟机上使用 Terraform 触发 virt-sysprep
- performance - 如何将最左边的表缓存在内存中以用于配置单元中的左外连接
- java - Spring Security 5 在 Application Runner 中调用 OAuth2 Secured API 导致 IllegalArgumentException
- java - 通过 Java 中的接口传递设置 - 可能吗?
- javascript - 在 javascript 中比较整数时遇到问题
- java - selenium 网格在同一浏览器上并行执行