html - 如何在 HTML5 "please wait"微调器中设置颜色？

Question

我想使用 HTML5 功能来获得“请稍候”微调器。可以在文章 Loading spinner animation using CSS and WebKit 中找到这方面的示例，通过此子页面说明 (no title, but a working example of the prior link) .

我可以毫不费力地复制代码(从与我在此处提供的链接不同的链接)并使其在我自己的网页中运行。我的困难在于使它成为正确的颜色。例如，在我使用的示例中，表盘段都是红色的。我在微调器的 CSS 中没有看到颜色 setter 、没有“颜色”、“背景”或“背景颜色”，也没有在 DIV 中明确设置。或者至少没有实际改变段颜色的设置。

谁能给我一个线索？

谢谢， 杰罗姆。

Answer 1

实际上，您只需在 mask 图像之前更改背景颜色，微调器颜色就会发生变化。您发布的第二个链接使用的是蒙版图像，而不是实际的彩色图像。面具围绕着一个彩色的 div，仅此而已。更改 div 的背景颜色，微调器颜色也会更改。

p#spinner {
  height: 0;
  padding-top: 62px;
  width: 62px;
  overflow: hidden;
  margin: 0 auto;
  background: #f00;  /* <----- this controls spinner color -------- */
  /* mask image removed from this post only due to space */
}

对于“请稍候”微调器，只需更改微调器 div 的背景颜色和标签的颜色即可:

div.labeled div.spinner div { background: #090; } 
div.labeled { color: #090; }

如下所示:JSBin example