Показать сообщение отдельно
  #23 (permalink)  
Старый 17.06.2015, 16:24
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Gozar
добавляем забор(в полосу можно дописать"обработка"),
Ты про это чтоль?
<style>
  #bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: red;
    box-sizing: border-box;
    -webkit-box-shadow: 1px 1px 6px 0px #333;
    -moz-box-shadow: 1px 1px 6px 0px #333;
    box-shadow: 1px 1px 6px 0px #333;
    -o-transition: 1s width ease;
    -ms-transition: 1s width ease;
    -moz-transition: 1s width ease;
    -webkit-transition: 1s width ease;
    transition: 1s width ease;
    width: 0;
    overflow: hidden;
  }

  #bar:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 50px;
    height: 100%;
    animation: trololo 2s linear infinite;
    background: linear-gradient(45deg, red 15%, white 50%, red 85%);
    margin-left: -25px;
  }

  @keyframes trololo {
    from {
      left: 0;
    }

    to {
      left: 100%;
    }
  }
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием