Animated SVGs don't animate until page is loaded

To start animations as early as possible (before load has been triggered) the SVG2 spec has added the timelineBegin attribute. This was also part of SVG Tiny 1.2.

Browser support for timelineBegin is still lacking though.

Possible alternatives include using css animations, web animations (created by script, see fiddle) or animating the svg with script. Of these sadly it's likely only the last one that will work in all browsers.

Sorry for the late response. I eventually just translated it to LESS and LESShat and this loads instantly.

http://jsfiddle.net/z84yd0to/2/

I can't use LESS in a jsfiddle so i had to use the output css, but the LESS/LESShat code I used was the following:

.loading-icon {
    width: 20px;
    height: 20px;

    .rect {
        background-color: black;
        height: 100%;
        width: 4px;
        float:left;
        .animation(loading-rect 0.60s infinite ease-in-out);

        & ~ .rect {
            margin-left:4px;
        }
    }

    .rect1 { .animation-delay(-0.30s); }

    .rect2 { .animation-delay(-0.20s); }

    .rect3 { .animation-delay(-0.10s); }
}


.keyframes(~'loading-rect, 0%, 100% { transform: scaleY(0.2); opacity: 0.2; } 50% { transform: scaleY(1.0); opacity: 1; }');