Where is the subtle animation on the medical pulse svg spinner coming from ?

2 replies · opened Aug 7, 2021

Wwebdev10000Aug 7, 2021

Hey guys, hope your having a great day,

I'm just curious as to where the subtle "gap" animation on the medical demo spinner is being applied ?

SSemicolon WebSTAFFAug 9, 2021

Hello,

Thanks for your Kind Patience!

The Animation for the Pulse in the Medical Demo is coming from the following CSS Codes added in the demos/medical/medical.css File:
[ch_pre type="css"]#css3-spinner-svg-pulse-wrapper {
position: absolute;
overflow: hidden;
width: 260px;
height: 210px;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -130px;
background-color: transparent;
animation: none;
-webkit-animation: none;
}

#css3-spinner-svg-pulse {
position: absolute;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -275px;
}

#css3-spinner-pulse {
stroke-dasharray: 281;
-webkit-animation: dash 5s infinite linear forwards;
}

/Animation/
@-webkit-keyframes dash {
from {
stroke-dashoffset:814;
}

to {
	stroke-dashoffset:-814;
}

}

@keyframes dash {
from {
stroke-dashoffset:814;
}

to {
	stroke-dashoffset:-814;
}

}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Wwebdev10000Aug 13, 2021

Superb. Thanks a bunch :)

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Where is the subtle animation on the medical pulse svg spinner coming from ? · Canvas Template Support