hasta ahora he logrado esto con los keyframes, es lo que quiero, pero ahora solo me queda el problema de que se acelera mucho o relentiza al final , la idea es que sea constante para que funcione como loader de una web y una app, no se si es algo en el keyframe o falta alguna propiedad. muchas gracias por la ayuda que me den.
body {
background-color: #3F82F1;
width: 100%;
}
#estaciona{
width:70%;
height:70%;
}
.cont {
margin: 0 auto;
padding-top: 100px;
}
.cont1 {
margin: 0 auto;
position: absolute;
text-align:center;
}
.st2 {
fill: none;
stroke: none;
stroke-width: 29;
stroke-miterlimit: 10;
}
.st2, .st3{
animation-name: dash;
animation-duration: 8s;
animation-iteration-count: infinite;
/* animation-direction: normal; */
animation-delay: 1s;
}
@keyframes dash{
0%{
/*stroke-dasharray:0;*/
stroke-dashoffset: 5000;
/*animation-direction:normal;*/
}
100%{
stroke-dasharray: 1560;
stroke-dashoffset: 30000;
stroke: #fff;
/* animation-direction: alternate-reverse; */
stroke-linecap: round;
/* animation-iteration-count: infinite; */
}
}
<div class="cont">
<div class="cont1">
<svg version="1.1"
id="estaciona" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 483 552"
style="enable-background:new 0 0 483 552;" xml:space="preserve">
<style type="text/css">
.st0{fill:#fff; stroke:none;}/*fondo circulo E*/
.st1{fill:#3F82F1;} /*letra E*/
.st2{fill:none;stroke:none;stroke-width:29;stroke-miterlimit:10;} /*Linea superior*/
.st3{fill:#FFFFFF;stroke:none;}/*punta redonda*/
</style>
<g>
<path class="st0" d="M240.6,89.3c-76,0-137.6,61.6-137.6,137.6s61.6,137.6,137.6,137.6s137.6-61.6,137.6-137.6
S316.6,89.3,240.6,89.3z"/>
<polygon class="st1" points="294.1,140.8 294.1,170 224.6,170 224.6,211 294.1,211 294.1,240 224.6,240 224.6,280.7 294.1,280.7
294.1,309.8 187.9,309.8 187.9,140.8 "/>
</g>
<g>
<g>
<path class="st2" d="M375.3,370.6C497.5,262.5,423.2,36.8,248,36.8C46.3,36.8,0,257.3,94.6,357.1
c84.8,89.5,160.6,162.1,160.6,162.1"/>
<g>
<!--<path class="st3" d="M384.8,381c-6,5-15,4.2-20-1.9s-4.2-15,1.9-20c6-5,15-4.2,20,1.9C391.7,367.1,390.9,376,384.8,381z"/>-->
</g>
</g>
</g>
</svg>
</div>
</div>