html / css：加载栏（带缓冲区） [英] html/css: loading bar (with buffer)

问题描述

你们能帮我调整我的加载栏css和/或html。

一个是有一些额外的阴影出来的左边和右边的外面的酒吧border（这使它看起来像border-radius是正确缩放时的像素化）。我知道这是 box-shadow 的问题，因为它不存在，当我删除框阴影属性 #progress 和 #buffer 。

另一个是相当小，但真的在欺骗我。当进度/缓冲条刚刚开始加载时（更改 style =width：0.4％），带半径的div的形式超出容器范围： p>

我知道我可以 overflow：hidden 它（我已经在 #loading_bar_container ），但我认为 position：absolute 不想隐藏（我需要绝对的原因，我需要两个酒吧在一个位置，彼此重叠） 。当我通过 #buffer （所以只有一个栏）删除，并删除 loading_bar 的 position：relative 和 #progress 的 position：absolute 场景我想要的是：

我在这里添加一个 jsfiddle fragment 代码，以便我们可以使用它。

干杯！

编辑：我已经将其添加为进度条做这个测试在Chrome和@Oriol提到它在FF工作良好。我检查，FF确实显示它的方式，我想要它。我检查了Safari，它显示的是同样的Chrome。所以这个问题是Chrome和Safari迄今为止。

解决方案

似乎是由引起的Chrome错误。位置：相对。

比较 http://jsfiddle.net/VeJNt/2/ 与 http://jsfiddle.net/ VeJNt / 3 /

然后您可以使用

  #progress {
 margin-top：-8px; 
} 
  

而不是 position：relative 和 position：absolute 。

在这里查看： http://jsfiddle.net/VeJNt/4/

但你为什么有 loading_bar_container 和 load_bar ？

应该简化您的代码： http://jsfiddle.net/VeJNt/5/

编辑：

如果您想要一个更一般的代码，您可以使用

 ＃loading_bar> div {
 border-radius：7px; 
 height：100％; 
 width：0％; 
 margin-top：-8px; 
} 
＃loading_bar> div：first-child {
 margin-top：0; 
} 
  

然后你只需要设置 / code>和 box-shadow 。

在这里查看： http://jsfiddle.net/VeJNt/6/

它不是累积的（-8px到第二个条，-16px到第三个，...），因为当你设置一个边缘不是如果你设置 position：relative 并将顶部设置为-8px，-16px ...

code> margin-top：10px 到一个元素，它下降10px，但不重叠下一个元素（所有以下元素也下降10px）。

然后，如果你在第二个栏中设置 margin-top：-8px ，它会变成8px，它和下一个栏之间的任何空间（所有以下的酒吧也8px了）。
然后，你不必在第三个栏中设置 margin-top：-16px ，你只需要-8px，因为它已经增加了8px因为第二个吧。

Can you guys help me in tweaking out my loading bar css and/or html. I've got two problems existing right now with my current loading bar.

One is that there is some excess shadow going out of the bar in the left and right outside the border (which makes it look like the border-radius is pixelated when zoomed properly). I know it's the box-shadow's problem cause it's not there when I remove the box shadow property for both #progress and #buffer.

And another is quite minor but is really bugging me. When the progress/buffer bar is just starting to load (change style="width:0.4%"), the form of the div with radius goes outside the container:

I know I can overflow:hidden it (which I already do in the #loading_bar_container), but I think position:absolute doesn't want to get hidden (which I need absolute cause I need the two bars to be in one position, overlapping each other). When I remove though the #buffer (so there's only one bar), and remove loading_bar's position:relative and #progress 's position:absolute, I get the scenario I want which is:

I'll add here a jsfiddle fragment of the code so we can play with it.

Cheers!

PS: I think tag should be loading-bar but I can't create a new tag so I add it as progress-bar.

Edit: I've done this test in Chrome and @Oriol mentioned it works well in FF. I've checked and FF does display it the way I wanted it to. I've checked with Safari and it displays the same was as Chrome. So this question is for Chrome and Safari so far. Haven't checked it with IE (scared).

解决方案

It seems it's a Chrome's bug caused by position:relative.

Compare http://jsfiddle.net/VeJNt/2/ with http://jsfiddle.net/VeJNt/3/

Then you can use

#progress {
    margin-top:-8px;
}​

instead of those position:relative and position:absolute.

See it here: http://jsfiddle.net/VeJNt/4/

But why do you have both loading_bar_container and loading_bar?

I think you should simplify your code: http://jsfiddle.net/VeJNt/5/

Edit:

If you want a more general code, which doesn't depend on the number of bars, you can use

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

And then you only have to set the background and box-shadow to each bar.

See it here: http://jsfiddle.net/VeJNt/6/

It isn't cumulative (-8px to the second bar, -16px to the third one, ...) because when you set a margin it isn't like if you are setting position:relative and setting top to -8px, -16px...

If you set margin-top:10px to an element, it goes 10px down, but doesn't overlap the next element (all the following elements go 10px down too).

Then, if you set margin-top:-8px to the second bar, it goes 8px up, but it doesn't appear any space between it and the next bar (all the following bars go 8px up too). Then, you don't have to set margin-top:-16px to the third bar, you only need -8px, because it has gone up 8px already because of the second bar.

这篇关于html / css：加载栏（带缓冲区）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！