Как установить цвет в HTML5 «пожалуйста, подождите» блесна? - PullRequest
Новая
       0

Как установить цвет в HTML5 «пожалуйста, подождите» блесна?

3 голосов
/ 29 января 2012

Я хочу использовать возможность HTML5, чтобы иметь счетчик «пожалуйста, подождите».Пример этого можно найти в статье Загрузка анимации вращения с использованием CSS и WebKit , проиллюстрированной на этой подстранице (без заголовка, но рабочий пример предыдущей ссылки) .

У меня нет проблем с копированием кода (по ссылке, отличной от той, которую я привел здесь) и запуска на моей собственной веб-странице.Моя трудность состоит в том, чтобы сделать его правильным цветом.Например, в примере, который я использовал, сегменты циферблата окрашены в красный цвет.Я не вижу никакого установщика цвета, никакого «цвета», «фона» или «цвета фона» в CSS для счетчика или заданного явно в DIV.Или, по крайней мере, нет настройки, которая фактически меняет цвет сегмента.

Может кто-нибудь дать мне подсказку?

Спасибо, Джером.

Ответы [ 3 ]

3 голосов
/ 29 января 2012

На самом деле, вы можете просто изменить цвет фона до того, как изменится изображение маски и цвет счетчика. Вторая размещенная вами ссылка использует изображение маски, а не реальное цветное изображение. Маска смачивается вокруг цветного 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

0 голосов
/ 30 января 2012

(этот редактор доставляет мне проблемы сегодня ...) Ответ 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>
0 голосов
/ 29 января 2012

Вторая ссылка, которую вы дали, действительно является изображением, поэтому вам придется вручную изменить цвет, если вы хотите сделать это таким образом.Тем не менее, статья, на которую вы ссылались, фактически дала другой метод.Если вы внимательно прочитаете его, вы заметите, что первое, о чем он говорит, - это просто поворот изображения с помощью CSS (вот почему вы запутались).Затем он покажет, как создать сам счетчик, используя простой HTML и CSS3. Вот ссылка на рабочую демонстрацию счетчика, без использования изображений.

В демонстрационном примере весь счетчик содержится в div, называемом spinner, и отдельных столбцахdivs сами.На div.spinner div есть стиль фона CSS, и вы можете изменить цвет с помощью этого стиля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...