当前位置： 文江博客话题详情

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

发布于 2024-12-29 17:20:44 字数 533 浏览 0 评论 0原文

我想使用 HTML5 功能来设置“请稍候”旋转器。可以在文章 加载中找到相关示例使用 CSS 和 WebKit 的旋转动画，通过此子页面 （没有标题，但是一个工作示例先前的链接）。

我可以毫无困难地复制代码（从与我在此处提供的链接不同的链接）并使其在我自己的网页中运行。我的困难在于使其颜色正确。例如，在我使用的示例中，表盘部分全部为红色。我在微调器的 CSS 中没有看到颜色设置器，也没有“颜色”、“背景”或“背景颜色”，也没有在 DIV 中明确设置。或者至少没有这些设置实际上改变了段的颜色。

有人可以给我线索吗？

谢谢， 杰罗姆.

原文

I'm wanting to use the HTML5 capability to have a "please wait" spinner. An example of this can be found at the article Loading spinner animation using CSS and WebKit, illustrated through this sub-page (no title, but a working example of the prior link).

I've no trouble in copying the code (from a different link than the one I gave here) and making it run in my own web page. My difficulty is in making it the correct color. For example, in the example I used the dial segments are all colored red. I see no color setter, no "color", "background" or "background-color" in the CSS for the spinner or set explicitly in the DIV. Or at least no setting of these that actually changes the color of the segment.

Can someone give me a clue?

Thanks,
Jerome.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

阪姬 2025-01-05 17:20:44

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

Actually, you can merely change the background color before the mask image and the spinner color will change. The second link you posted is using a mask image, not an actual colored image. The mask soins around a colored div, that's all. Change the background color of the div, and the spinner color changes.

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 */
}

for the "please wait" spinner, it's a matter of changing the background color of the spinner divs and the color for the label:

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

as seen here: JSBin example

回复 原文
无声无音无过去 2025-01-05 17:20:44

您提供的第二个链接确实是一个图像，因此如果您想这样做，则必须手动更改颜色。然而，您链接到的文章实际上给出了不同的方法。如果你仔细阅读它，你会注意到它所说的第一件事就是通过 CSS 旋转图像（这就是你感到困惑的原因）。然后展示如何使用简单的 HTML 和 CSS3 创建微调器本身。 这里是微调器的工作演示的链接，不使用图像。

在演示中，整个微调器包含在一个名为 spinner 的 div 中，各个条形本身就是 div 。 div.spinner div 上有一个 CSS 背景样式，您可以通过该样式修改颜色。

The second link that you gave is indeed an image, so you'll have to manually change the color if you wish to do it that way. However, the article that you linked to actually gave a different method. If you read it carefully, you'll notice that the first thing it speaks about is simply rotating an image via CSS (which is why you're confused). It then goes to show how to create the spinner itself using simple HTML and CSS3. Here's a link to a working demo of the spinner, without using images.

In the demo, the entire spinner is contained in a div called spinner, and the individual bars are divs themselves. There is a CSS background style on div.spinner div, and you can modify the color via that style.

回复 原文
╰ゝ天使的微笑 2025-01-05 17:20:44

（今天这个编辑给我出难题了……）
div.spinner div 的答案没有让我到达那里。

这是原始链接， http://s3.amazonaws.com/37assets/svn /461-spinner.html。我对其中名为“请稍候”的旋转器感兴趣。它是红色的。我可以轻松更改文本颜色，但旋转的部分仍然是令人沮丧的红色。

为了省去您的麻烦，我将内容（包括颜色#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>

(This editor is giving me problems today...)
The div.spinner div answer doesn't get me there.

Here is the original link, http://s3.amazonaws.com/37assets/svn/461-spinner.html. In it I'm interested in the named "Please Wait" spinner. It is red. I can easily change the text color, but the spinning segments remain frustratingly red.

To save you the trouble, I'm copying the contents, including a color of #00cc00, into this comment. Note that the green color doesn't appear anywhere.

<!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>
回复 原文
~没有更多了~

关于作者

一笑百媚生

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

我一直都在从未离去

文章 0 评论 0

fangs

文章 0 评论 0

朱染

文章 0 评论 0

zhangcx

文章 0 评论 0

Willy

文章 0 评论 0

taohaoge

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文