CSS3 анимированный progressbar IE9 polyfill CSS3Pie

Question

Я пытаюсь создать простой индикатор выполнения для своей веб-страницы. я установки мой код, как следует:

<div class="progress"> 
    <p class="info">Some nice info</p> 
    <div class="update-progress"> 
    <div class="update-progress-bar animate" style="width: 40%"></div> 
</div> 

и мой CSS, как это:

.progress { 
    position: relative; 
    margin: 20px -20px -20px; 
    padding: 15px; 
    background: #fafafa; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    border-radius: 0 0 6px 6px; 
    background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: -o-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: linear-gradient(to bottom, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    box-shadow: inset 0 1px white; 
    line-height: 21px; 
    color: #999; 
    text-shadow: 0 1px white; 
} 
.progress .info { 
    line-height: 16px; 
    font-size: 11px; 
    text-align: center; 
} 
.progress .update-progress { 
    clear: left; 
    margin-top: 5px; 
    /*margin: 12px 10px 4px;*/ 
    height: 8px; 
    padding: 3px; 
    background: #ebebeb; 
    border-radius: 7px; 
    box-shadow: inset 0 2px 3px #000000, 0 1px white; 
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px white; 
} 
.progress .update-progress-bar { 
    height: 100%; 
    background: #73c822; 
    border: 1px solid; 
    border-color: #6eb626 #62a21f #5a9122; 
    border-radius: 4px; 
    box-sizing: border-box; 
    background-image: -webkit-linear-gradient(top, #73c822, #67aa24); 
    background-image: -moz-linear-gradient(top, #73c822, #67aa24); 
    background-image: -o-linear-gradient(top, #73c822, #67aa24); 
    background-image: linear-gradient(to bottom, #73c822, #67aa24); 
    box-shadow: inset 0 1px rgb(255, 255, 255); 
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); 
    /*ANIMACJA*/ 
    -moz-transition: width .5s ease-in-out; 
    -o-transition: width .5s ease-in-out; 
    -webkit-transition: width .5s ease-in-out; 
    transition: width .5s ease-in-out; 
} 
.progress .animate { 
    content:""; 
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
    z-index: 1; 
    background-size: 50px 50px; 
    -moz-animation: move 2s linear infinite; 
    -o-animation: move 2s linear infinite; 
    -webkit-animation: move 2s linear infinite; 
    animation: move 2s linear infinite; 
    overflow: hidden; 
} 
@-webkit-keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 
@-moz-keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 
@keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 

С этим я прогресс бар, который выглядит следующим образом:
Мой код доступен здесь : http://jsfiddle.net/Misiu/BhRtQ/

Теперь я хочу сделать его совместимым с IE9.

Для градиентов я планирую использовать CSS3PIE, но я не знаю, как это сделать.

Как я могу хорошо выглядеть на IE9?
Моя первая идея состояла в том, чтобы использовать анимированный gif в качестве фона в IE9, но, возможно, это можно сделать без внешних изображений?

Может ли анимированный фон CSS3Pie?

EDIT:
Вот моя временная версия: http://jsfiddle.net/Misiu/BhRtQ/9/
Я использую JQuery анимацию для анимации положения фона.

Answer 1

Я честно не считаю, что CSS3Pie даст вам хороший опыт здесь.

Это, безусловно, можно контролировать динамически - страница CSS3Pie предоставляет доказательства этого, позволяя вам переключать эффекты.

Проблема в том, что анимация намного сложнее, чем просто включать и выключать эффект. Для анимации потребуется, чтобы браузер отображал каждый кадр быстро.

Я никогда не пытался оживить CSS3Pie. Я бы предположил, что это было бы возможно, но это, конечно же, не будет работать в сочетании с анимацией CSS, и я также готов поспорить, что это будет абсолютная зависть для производительности вашего браузера.

CSS3Pie отлично подходит для спотовых эффектов, но, как известно, имеет проблемы с производительностью, когда он много используется на странице. Если браузеру необходимо повторно обрабатывать эффекты CSS3Pie несколько раз в секунду для анимации, это определенно подпадает под мое определение «много».

Я думаю, вам было бы намного лучше, если бы вы обеспечили твердый цвет для старых браузеров. Эффект градиента хорош, но на самом деле не стоит жертвовать такой большой производительностью браузера для него (особенно учитывая, что все дело в том, чтобы показать индикатор выполнения, поэтому вам явно нужна вся производительность браузера, которую вы можете получить).

Если вам нужно только поддерживать IE9, тогда можно использовать фоновый эффект без CSS3Pie, используя и изображение SVG для вашего фона. Это может быть включено в ваш CSS-код в качестве URL-адреса данных и отлично работает в простом CSS как решение для IE9. See here для генератора, который может предоставить вам соответствующий код.

Хорошо, что это решение - это чистый CSS, поэтому он отлично работает с вашей существующей анимацией; т.е. это в основном только фоновое изображение, поэтому ваша анимация, перемещая изображение, будет работать.Да, это образ, но он не является внешним по отношению к CSS, поэтому, надеюсь, он соответствует вашим критериям. (вы, конечно же, можете сделать это с PNG-изображением в качестве URL-адреса данных, но SVG, вероятно, будет лучше)

Конечно, это не сработает для IE8, но вы указали IE9 в вопросе , Если вам нужна поддержка IE8 или вам не нравится решение для URL-адресов данных, то мой совет состоит в том, чтобы придерживаться простого цвета фона в качестве спада.