user3704796 February 2016

SVG Fill Path Animation

I don't have experience with svg and animations, I have the following file jsfiddle which i want to animate the fill path color.

I want to use it as a loader so the new colour should fill the path like Sliding across or something similiar that gives it a look of "loading". You can use any color it's just an example...

Thank you

Answers


Matthew Lymer February 2016

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="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.

Post Status

Asked in February 2016
Viewed 2,694 times
Voted 13
Answered 1 times

Search




Leave an answer