Search code examples
csscss3piepolyfills

CSS3 animated progressbar IE9 polyfill CSS3Pie

I'm trying to create simple progress bar for my webpage. I've setup my code as followed:

<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>

and my css like this:

.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;
    }
}

With this I have progress bar that looks like this: enter image description here
My code is available here: http://jsfiddle.net/Misiu/BhRtQ/

What I want to do now is to make it compatible with IE9.

For gradients I'm planning to use CSS3PIE, but I have no idea how to do that progress animation.

How can I make this look good on IE9?
My first idea was to use animated gif as background in IE9, but maybe this can be made entirely without external images?

Can CSS3Pie background be animated?

EDIT:
Here is my temporary version: http://jsfiddle.net/Misiu/BhRtQ/9/
I'm using jQuery animate to animate background position.

Solution

  • I honestly don't think that CSS3Pie is going to give you a good experience here.

    It certainly can be controlled dynamically -- the CSS3Pie homepage provides evidence of this by allowing you to toggle the effects.

    The problem is that animation is a lot more complex than simply toggling an effect on and off. Animating will require the browser to render each frame in quick succession.

    I've never tried to animate with CSS3Pie. I'd guess that it would be possible, but it certainly won't work in conjunction with CSS animation, and I'd also be willing to bet that it would be an absolute hog for your browser performance.

    CSS3Pie is great for spot effects, but is known to have performance problems when it's used a lot on a page. If the browser is having to re-process the CSS3Pie effects multiple times per second for an animation, that would definitely fall under my definition of "a lot".

    I think you would be far better off just providing a solid-colour fall-back for older browsers. The gradient effect is nice, but it's really not worth sacrificing that much browser performance for it (especially given that the whole point is to show a progress bar, so you clearly need all the browser performance you can get).

    If you only need to support IE9, then it is possible to achieve background effects like this without CSS3Pie, by using and SVG image for your background. This can be included in your CSS code as a data-URL, and works really well in plain CSS as a fall-back solution for IE9. See here for a generator tool that can provide you with the appropriate code.

    The good thing about this solution is that it is pure CSS, so it will work perfectly with your existing animation; ie it's basically just a background image, so your animation by moving the image will just work. Yes, it's an image but it's not external to the CSS, so hopefully it meets your criteria. (you could, of course, also do this with a PNG image as a data-url, but SVG will probably be better)

    Of course, this won't work for IE8, but you did specify IE9 in the question. If you need IE8 support or if you don't like the data-URL solution, then my advice is just to stick with a plain background colour as a fall-back.