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 ?
2 replies · opened Aug 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 ?
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.
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