Question

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

我在复制代码方面没有遇到任何问题（来自与我在此处给出的链接不同的链接）并使其在我自己的网页中运行。我的困难在于使它成为正确的颜色。例如，在我使用的示例中，拨号段都是红色的。我在CSS中看到没有颜色设置器，没有“颜色”，“背景”或“背景颜色”，或者在DIV中明确设置。或者至少没有这些设置实际上改变了段的颜色。

有人能给我一些线索吗？

谢谢，杰罗姆。

Answer 1

实际上，您只能在遮罩图像和微调器颜色发生变化之前更改背景颜色。您发布的第二个链接是使用蒙版图像，而不是实际的彩色图像。面具在彩色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

Answer 2

您提供的第二个链接确实是一个图像，因此如果您希望以这种方式进行操作，则必须手动更改颜色。但是，您链接到的文章实际上提供了不同的方法。如果你仔细阅读它，你会发现它首先谈到的只是通过CSS旋转图像（这就是为什么你感到困惑）。然后介绍如何使用简单的HTML和CSS3创建微调器。 Here's a link to a working demo of the spinner, without using images.

在演示中，整个微调器包含在名为div的{{1}}中，各个条都是spinner。 divs上有一个CSS背景样式，您可以通过该样式修改颜色。

Answer 3

（这位编辑今天给我带来了问题......） div.spinner div回答不会让我在那里。

以下是原始链接http://s3.amazonaws.com/37assets/svn/461-spinner.html。在其中我对名为“Please Wait”的微调器感兴趣。它是红色的。我可以很容易地改变文字颜色，但旋转的部分仍然令人沮丧地变红。

为了省去麻烦，我将内容（包括＃00cc00的颜色）复制到此评论中。请注意，绿色不会出现在任何地方。

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Spinner</title>

    <style type="text/css">
      html, body {
        background: #e5e5e5;
        text-align: center;
      }

    /* start basic spinner styles*/

    div.spinner {
      position: relative;
      width: 100px;
      height: 100px;
      display: inline-block;
    }

    div.spinner div {
      width: 12%;
      height: 26%;
      background: #000;
      position: absolute;
      left: 44.5%;
      top: 37%;
      opacity: 0;
      color: #00cc00;
      -webkit-animation: fade 1s linear infinite;
      -webkit-border-radius: 50px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }

    div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
    div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
    div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
    div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
    div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
    div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
    div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
    div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
    div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
    div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
    div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
    div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

     @-webkit-keyframes fade {
      from {opacity: 1;}
      to {opacity: 0.25;}
    }

    /* end basic spinner styles*/

    div.container {
      display: inline-block;
      padding: 1.5em 1.5em 1.25em;
      background: rgba(0,0,0,0.8);
      -webkit-box-shadow: 1px 1px 1px #fff;
      -webkit-border-radius: 1em;
      margin: 1em;
    }

    div.container.grey {background: rgba(0,0,0,0.2);}
    div.container.grey.blue {background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0a2744), color-stop(1, #064483));}

    div.container div.spinner {
      width: 28px;
      height: 28px;
    }

    div.container.grey div.spinner {
      width: 60px;
      height: 60px;
    }

    div.container div.spinner div {background: #fff;}

    div.labeled {
      font-family: sans-serif;
      font-size: 14px;
      margin: 0 auto;
      background: #fff;
      padding: 0.5em 0.75em 0.5em 0.5em;
      display: inline-block;
      color: #c00;
      line-height: 25px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
      -webkit-border-radius: 1em;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
    }

    div.labeled div.spinner {
      float: left;
      vertical-align: middle;
      width: 25px;
      height: 25px;
      margin-right: 0.5em;
    }

    div.labeled div.spinner div {background: #c00;}

    </style>
</head>

<body>

  <div class="spinner">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
    <div class="bar9"></div>
    <div class="bar10"></div>
    <div class="bar11"></div>
    <div class="bar12"></div>
  </div>

  <div class="spinner" style="width: 64px; height: 64px">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
    <div class="bar9"></div>
    <div class="bar10"></div>
    <div class="bar11"></div>
    <div class="bar12"></div>
  </div>

  <div class="spinner" style="width: 34px; height: 34px">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
    <div class="bar9"></div>
    <div class="bar10"></div>
    <div class="bar11"></div>
    <div class="bar12"></div>
  </div>

  <div class="spinner" style="width: 19px; height: 19px">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
    <div class="bar9"></div>
    <div class="bar10"></div>
    <div class="bar11"></div>
    <div class="bar12"></div>
  </div>

  <div class="labeled">
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
    Please waitâ€¦
  </div>

  <div class="container">
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
  </div>

  <div class="container grey">
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
  </div>

  <div class="container grey blue">
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
  </div>


</body></html>

如何在HTML5中设置颜色“请稍候”微调器？

3 个答案: