This question is quite similar to this SO post but I'm using an svg animated spinner defined in a separate file where all my svg icons are stored. The spinner works fine when I display it by using $("#spinner").show(). However, when I try to display the spinner during loading of data (lots of data), it freezes. It restarts towards the end of loading but my code hides it after as it should. Kinda defeats the purpose of showing the loading spinner if it doesn't spin.
I created a demo below with a time out to simulate data processing. You can adjust the timeout time and the number of records if your machine is more powerful.
I know there's a css alternative in the mentioned SO post but I would like to try keeping an svg implementation.
Any input is appreciated. Thanks!
var records = [];
function LoadData() {
for (var i = 0; i < 100000; i++) {
setTimeout(records.push("Record" + i), 100000);
}
$("button").html("Done");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- SEPARATE SVG DEF FILE -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
<defs>
<symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#0353A4" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#0353A4" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/>
</path>
</symbol>
</defs>
</svg>
</div>
<!-- VIEW PAGE -->
<div>
<svg><use xlink:href="#icon-loading"></use></svg>
</div>
<button onclick="LoadData();">Load Data</button>
If you use Css animations insted it works without a problem for me.
The only thing that I noticed: the circle is a bit off center. You can fix this with css transform origin or fix the svg.
var records = [];
function LoadData() {
for (var i = 0; i < 100000; i++) {
setTimeout(records.push("Record" + i), 100000);
}
$("button").html("Done");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#keyframes rotate {
from {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}
#loading {
animation: rotate .5s infinite linear;
}
</style>
<!-- SEPARATE SVG DEF FILE -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
<defs>
<symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#0353A4" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#0353A4" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
</path>
</symbol>
</defs>
</svg>
</div>
<!-- VIEW PAGE -->
<div>
<svg id="loading"><use xlink:href="#icon-loading"></use></svg>
</div>
<button onclick="LoadData();">Load Data</button>
Related
I finally dared to start on a small, first project I was thinking about for a while after taking a few courses on full-stack developement and a little bit of design.
This small sketch represents how I would like my navigation to look.
The problem I'm facing is that I don't know how I would make the SVG Path that underlines the nav scale like I want it to (The little ECG thingy should move without being squished while the lines next to it get smaller, check the picture to see what I mean).
This is the SVG Code:
<svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000">
<path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path>
</g>
</g>
Do you guys have any idea on how to approach this?
As I commented above you can keep your element with a fixed big width and center it within the container and make it overflowing:
.container {
display: flex;
justify-content: center;
overflow: hidden;
}
svg {
width: 1440px;
height: 63px;
}
<div class="container">
<div>
<svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000">
<path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path>
</g>
</g>
</svg>
</div>
</div>
I am currently working on some new stuff and I have been introduced to the world of SVG objects. They are nice. I have a button that I have built and I put a filter on it. The designer I'm working with would like the filter (a drop shadow) to go from opacity 1 to 0 on hover, and return to 1 off hover.
I have tried just normal transitions on the filter, and I can get the filter to disappear but the transition is far from smooth.
Here's my code:
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" style="enable-background:new 0 0 216 216;" xml:space="preserve">
<filter id="fade" height="150%" width='150%'>
<feMerge>
<feMergeNode/>
<!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic" />
<!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<filter id="dropshadow" height="150%" width='150%'>
<feGaussianBlur in="SourceAlpha" stdDeviation="25" />
<!-- stdDeviation is how much to blur -->
<feOffset dx="0" dy="15vh" result="offsetblur" />
<!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic" />
<!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<a href='' id='playvideo_button'>
<g>
<path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
<polygon class="st1" points="92,140 92,76 140,108" />
</g>
</a>
</svg>
CSS
svg {
width: 30vw;
height: 30vh;
cursor: pointer;
}
svg .st0 {
fill: #4982CF;
transition: filter.6s ease-out;
filter: url(#dropshadow);
}
svg .st1 {
fill: #ffffff;
}
svg:hover .st0{
filter: url(#fade);
}
Here is my Fiddle that I have been playing around with.
Edits
I have created a second filter, which is just a transparent overlay, but that has also failed and does the same not smooth effect. I'm pretty much at a loss here.
Using transitions on the filter is not the way to do this. Here is a more elegant way. There are a bunch of things here you should note:
You need to size both the svg and the filter regions properly to make sure the shadow isn't cut off
You can't transition filters
Support for CSS units isn't reliably supported inside an SVG filter, stick to either objectBoundingBox (%) or userSpaceOnUse (viewbox) units
Look at how I constructed the filter to allow it to be drawn on top of the shape (to capture hover) without obscuring it. That's the "operator="out" part of the filter.
Enclose your filter in a defs element. Some browsers require this.
DON'T use Illustrator exports as boilerplates. They're really not well constructed SVG.
In general, the worst way to learn SVG is by trying to decode or tweak Illustrator export code. It's just an unmitigated craptastic disaster.
svg {
width: 30vw;
height: 30vh;
cursor: pointer;
}
svg .st0 {
fill: #4982CF;
}
svg .st1 {
fill: #ffffff;
}
#usedshadow {
opacity: 1;
transition: opacity 0.6s;
}
#usedshadow:hover {
opacity: 0;
transition: opacity 0.6s;
}
<svg version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300">
<defs>
<filter id="dropshadow" x="-50%" y="-50%" height="200%" width='200%'>
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
<!-- stdDeviation is how much to blur -->
<feOffset dx="0" dy="15" result="offsetblur" />
<!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feComposite operator="out" in2="SourceGraphic"/>
</filter>
<g id="myshape">
<path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
<polygon class="st1" points="92,140 92,76 140,108" />
<g>
</defs>
<use xlink:href="#myshape"/>
<use id="usedshadow" filter="url(#dropshadow)" xlink:href="#myshape"/>
</svg>
You can achieve this effect using a path with a gaussian blur to simulate the shadow instead of using a filter, the result i got is this:
In this way you can handle the "drop shadow" directly, then with just simple CSS you can make the opacity transition.
svg #shadow{
transition: all 0.65s;
opacity:1;
}
svg:hover #shadow{
opacity:0;
}
The complete SVG:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="216"
height="216"
id="svg3013">
<defs
id="defs3015">
<filter
x="-0.14227594"
y="-0.13746469"
width="1.2845519"
height="1.2749294"
color-interpolation-filters="sRGB"
id="filter3826">
<feGaussianBlur
id="feGaussianBlur3828"
stdDeviation="8.4688065" />
</filter>
</defs>
<g
transform="translate(0,-836.36218)"
id="layer1">
<path
d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
transform="matrix(1.064,0,0,1.0280193,-11.320001,836.29069)"
id="shadow"
style="fill:#1a1a1a;fill-opacity:1;stroke:none;filter:url(#filter3826)" />
<g
transform="translate(-0.14285916,0.7142867)"
id="g3806">
<path
d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
transform="matrix(1.064,0,0,1.0280193,-11.177142,835.5764)"
id="path3021"
style="fill:#4982cf;fill-opacity:1;stroke:none" />
<path
d="m 86.476396,914.53271 0,58.81194 54.094674,-27.18845 z"
id="path3796"
style="fill:#ffffff;stroke:none" />
</g>
</g>
</svg>
And the working example here: https://jsfiddle.net/h3s1hp3k/
I have been trying to get the circles in my stage to move around the ellipses, I even copied code from someone that had a very similar setup, but no dice. Heres the codepen and the markup below.
http://codepen.io/alcoven/pen/XJXMNW
<div id="wrapper">
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<!--<g>
<circle fill="#F26451" cx="17.6" cy="3.3" r="1.4"/>
</g>
<g>
<circle fill="#F26451" cx="6.4" cy="23.1" r="1.4"/>
</g>-->
<line class="line" stroke-width="1.3" stroke-miterlimit="10" x1="3.7" y1="26.1" x2="26.2" y2="3.6"/>
<path class="vertical" d="M9.9,14.9a5,14 0 1,0 10,0a5,14 0 1,0 -10,0"/>
<ellipse class="_x34_5deg" transform="matrix(0.5037 0.8639 -0.8639 0.5037 20.2917 -5.4991)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<ellipse class="_x2D_45deg" transform="matrix(-0.5037 0.8639 -0.8639 -0.5037 35.3327 9.5202)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<path class="circlet" d="M16.4,3.2a1.3,1.3 0 1,0 2.6,0a1.3,1.3 0 1,0 -2.6,0"/>
<path class="circleb" d="M5,23.2a1.4,1.4 0 1,0 2.8,0a1.4,1.4 0 1,0 -2.8,0"/>
</svg>
</div>
</div>
CSS
#wrapper {
top:0;
left:0;
position:absolute;
width:100%;
height:100%;
background:#F26451;
}
.container {
width:100%;
position:fixed;
top:30%;
bottom:70%;
}
svg {
width:100px;
height:auto;
margin:10% auto;
display:block;
}
line, .vertical, ellipse._x34_5deg, ellipse._x2D_45deg {
stroke:#fff;
fill:none;
stroke-width:1.3;
stroke-miterlimit:10;
}
.circlet, .circleb {
stroke:#fff;
fill:#F26451;
stroke-width:1.3;
stroke-miterlimit:10;
}
.line {
display:none;
}
JS
(function($){
$('[class^="circle-"]').animate({opacity:1},500);
// get the animation path node
var $path = $('.vertical'), path = $path[0];
var $path2 = $('.vertical'), path2 = $path2[0];
// get the animation object node
var $obj = $('.circlet');
var $obj2 = $('.cirlceb');
// get path's length
var pathLength = path.getTotalLength();
var pathLength2 = path2.getTotalLength();
// create new tween by initializing TWEEN.Tween object from 0
var tween = new TWEEN.Tween({ length: 0 })
// to path length
// in 2000 milliseconds
.to({ length: pathLength }, 1500)
// on update callback fires on every tick
.onUpdate(function(){
var point = path.getPointAtLength(this.length);
$obj.css({
'transform': 'translate('+ point.x + 'px,'+ point.y +'px)'
});
}).repeat(999999999).start();
var tween2 = new TWEEN.Tween({ length: 0 })
// to path length
// in 2000 milliseconds
.to({ length: pathLength2 }, 1500)
// on update callback fires on every tick
.onUpdate(function(){
var point2 = path2.getPointAtLength(this.length);
$obj2.css({
'transform': 'translate('+ point2.x + 'px,'+ point2.y +'px)'
});
}).repeat(999999999).start();
// animate loop
animate = function(){
requestAnimationFrame(animate)
TWEEN.update()
}
//start the animation loop
animate()
}(jQuery));
Can't quite figure out why this isn't working, not sure if it's my js or the way my svg is setup please help :]
Here's the js I copied http://codepen.io/joshy/pen/cojbD
Define an animation path, which could be a circle , ellipse or Bezier curve.
Enclose the path definition between animateMotion tags ,one pair within each moving object definition, as follows:
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
No javascript or jQuery required !
I would like to convert an svg path animation, to a pure javascript one.
SVG code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
CSS code:
.path {
stroke-dasharray: 10 10; /* 10px fill, 10px gap */
-webkit-animation: dash 10s linear normal infinite;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
Here is the Fiddle
I'm not sure why you need pure javascript, also this answer may not fit your needs as it actually does create inline CSS. But here it is, mostly taken from : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
function dashOffset() {
var path = document.querySelector('.path');
var length = "1000";
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = "10 10";
path.style.strokeDashoffset = "1000";
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 10s linear';
//listener to restart our loop
path.addEventListener('transitionend', dashOffset, false);
// Go!
path.style.strokeDashoffset = '0';
}
dashOffset();
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
</svg>
There is also the requestAnimationFrame way :
function anim(){
var path = document.querySelector('.path');
path.style.strokeDasharray = "10 10";
path.style.strokeDashoffset--;
requestAnimationFrame(anim);
}
requestAnimationFrame(anim);
function anim(){
var path = document.querySelector('.path');
path.style.strokeDasharray = "10 10";
path.style.strokeDashoffset--;
requestAnimationFrame(anim);
}
requestAnimationFrame(anim);
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
</svg>
Note that you may be able to reproduce it with the pure SVG animateMotion element.
There are a few javascript SVG libraries you could look into. I'm partial to Raphael (www.raphaeljs.com).
It would be something like this:
var paper = Raphael('canvas', 600, 600);
paper.path("M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s- 5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z")
.attr({fill:"#FFFFFF", stroke: "#000000", "stroke-width": "4", "stroke-miterlimit": "10"})
fiddle: http://jsfiddle.net/xLekbar4/
(Note: I added a div to the html as a container for the raphael "canvas", and changed the css to apply to 'path' elements, instead of elements with class '.path')
I strongly recommend you give a try to the Raphael.js library.
Using it you could easily reproduce what you want.
Additionally there's this very useful tool to convert your SVG file into Raphael.js reusable code : http://www.readysetraphael.com/
So your SVG file will become :
var rsr = Raphael('rsr', '340', '333');
var path_a = rsr.path("M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z");
path_a.attr({
class: 'path',
fill: '#FFFFFF',
stroke: '#000000',
"stroke-width": '4',
"stroke-miterlimit": '10',
'stroke-opacity': '1'
}).data('id', 'path_a');
var rsrGroups = [];
Then you just have to add a <div id="rsr"></div> to your document and also replace the CSS selector .path to path.
Et voilà !
Check this Fiddle to see the it in action :
http://jsfiddle.net/47nkqgmn/
I'm attempting to make a Circle progress bar much like seen here.
This jQuery plugin does exactly what I want to be able to accomplish with the problem being that it isn't cross-browser as velocity.js is.
I have looked at other sources such as:
example #1
example #2
example #3
$("div").velocity(
{
rotateZ: 360
},
{
easing: [ 60 ],
duration: 30000
});
Iam answering this because i have been after this problem , you should refer to this link if you are after cross browser solution :
http://css-tricks.com/svg-line-animation-works/
HTML:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
CSS:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
Demo
Also : Knob JS would be a good option
http://anthonyterrien.com/knob/
<input type="text" value="75" class="dial">
<script>
$(function() {
$(".dial").knob();
});
</script>
check the example where you can use knob as timer.