Неопределенный индикатор выполнения в HTML + CSS - PullRequest
Новая
       38

Неопределенный индикатор выполнения в HTML + CSS

3 голосов
/ 26 сентября 2011

Я хотел бы создать неопределенный индикатор прогресса HTML + CSS , чтобы он выглядел так же, как в Vista:

Vista неопределенный индикатор выполнения http://i.msdn.microsoft.com/dynimg/IC121865.png

Iхотел бы:

  1. по горизонтали настроить его на ширину индикатора выполнения (можно определить минимальную и максимальную ширину)
  2. не использовать Javascript, а скорее анимированный GIF
  3. имея только один индикатор движения по всей ширине

Есть предложения, как это сделать?

Ответы [ 3 ]

17 голосов
/ 09 февраля 2014

НЕТ, НЕТ, НЕТ!Это возможно

Используя CSS overflow: hidden и keyframe, это возможно.

Для ключевого кадра я использовал от left:-120px (ширина светящегося объекта) до left:100%

Структура, которую я использовал: 

<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>

Обновленная, компактная структура с использованием :before и :after: 

<div class="loader7">
    <span></span>
    <div class="greenlight"></div>
</div>

Градиент, маскировка, свечение и все эффекты стоят дорогой структуры.Если у кого-то есть идея получше, пожалуйста, дайте мне знать.

На эту дату решение только для webkit (эллиптическая маска для свечения):

ДобавленоSVG маска для Firefox и других браузеров, которые не поддерживают -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/

enter image description here

0 голосов
/ 26 сентября 2011

GIF-only решение

Неопределенный индикатор выполнения Vista не зацикливается сразу после того, как он выключается справа ... Поэтому я мог бы создать достаточно широкое изображение GIF, и когда индикатор выполнения будет узким, он будетзаймет больше времени, чтобы это зациклилось, и когда оно станет шире, оно снова зациклится.:)

Время каждого повтора одинаково в обоих случаях, но в узкой полосе для достижения конца требуется меньше, чем в более широких.

0 голосов
/ 26 сентября 2011
  1. css - ширина: 100%
  2. no Javascript означает, что вам придется делать это с html5, что немного сложнее.Анимированный GIF будет работать, только если вы решите сделать полосу фиксированной ширины (в противном случае изображение будет перекошено)
  3. , чтобы переместить его: javascript или html5

Самый простой способ:JavaScript (нравится это или нет ...;))

...