SVG Indeterminate Progress Element

A cross browser compatible version approximating IE11's own progress element.

by bodine30

HTML

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
        <rect x="0" y="0" width="10" height="10">
            <animate attributeName="x"
                from          = "0"
                to            = "100"
                begin         = "0s"
                dur           = "2s"
                fill          = "freeze"
                calcMode      = "spline"
                keySplines    = "0.000, 0.860, 1.000, 0.075"
                keyTimes      = "0;1"
                repeatCount   = "indefinite"
            ></animate>
        </rect>
        <rect x="0" y="0" width="10" height="10">
            <animate attributeName="x"
                from          = "0"
                to            = "100"
                begin         = "0.75s"
                dur           = "2s"
                fill          = "freeze"
                calcMode      = "spline"
                keySplines    = "0.000, 0.860, 1.000, 0.075"
                keyTimes      = "0;1"
                repeatCount   = "indefinite"
            ></animate>
        </rect>
        <rect x="0" y="0" width="10" height="10">
            <animate attributeName="x"
                from          = "0"
                to            = "100"
                begin         = "1.5s"
                dur           = "2s"
                fill          = "freeze"
                calcMode      = "spline"
                keySplines    = "0.000, 0.860, 1.000, 0.075"
                keyTimes      = "0;1"
                repeatCount   = "indefinite"
            ></animate>
        </rect>
    </svg>
</div>

CSS

svg, #container{
    height: 100vh;
    width: 100vw;
}