[Solved] SVG Fill Path Animation

by


I know it’s not fully the way you want to do it, but view this link:

http://cdn.tinfishcreativedev.eu/eyeLoad/

It has a VERY simple implementation (quite crude at the minute, but just to get you started).

The code in the HTML file is as follows:

<style>
body{
    background:#F3F5F6;
    text-align: center;
}

.loader{
    background: #000;
    display: inline-block;
    position: relative;
    height:63px;
    width:100px;
    margin-top:300px;
}


.loader img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index:2;
}

.loaderBar{
    background: #16C38B;
    width: 0;
    position: relative;
    z-index: 1;
    height:100%;
    -webkit-animation:grow 2s infinite linear;
}

@-webkit-keyframes grow{
    0%{ width:0; }
    100%{ width: 100%; }
}
</style>
<div class="loader">
    <img src="https://stackoverflow.com/questions/35272561/eye.png" width="100" />
    <div class="loaderBar">
</div>

You could even do it with JS instead of keyframes to get it working on the older browsers like IE8 if needed.

1

solved SVG Fill Path Animation