I created a unique animation with circle borders using HTML and CSS:
<div class="spin"></div>
@keyframes spinner {
0% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
}
.spin::before {
animation: 2s linear infinite spinner;
animation-play-state: inherit;
border: solid 6px blue;
border-bottom-color: transparent;
border-radius: 100%;
content: "";
height: 70px;
width: 70px;
position: absolute;
top: 90%;
left: 90%;
transform: translate3d(-50%, -50%, 1);
will-change: transform;
margin-top: -70px;
}
Here is the visual representation of the animation:
1. How can I apply gradient colors to the circle border?
2. Is there a way to customize the border radius of the circle?
Example like this:
![][2]
To achieve my goal, I utilized an SVG file :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25.8524mm" height="25.8524mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 158.05 158.05"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#2C80EB;fill-rule:nonzero}
]]>
</style>
<mask id="id0">
<linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="79.79" y1="128.31" x2="146.43" y2="131.43">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.34902" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id1)" width="158.05" height="158.05"/>
</mask>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" style="mask:url(#id0)" d="M79.02 0c3.57,0 6.47,2.9 6.47,6.47 0,3.57 -2.9,6.47 -6.47,6.47 -18.25,0 -34.77,7.4 -46.73,19.35 -11.96,11.96 -19.35,28.48 -19.35,46.73 0,18.25 7.4,34.77 19.35,46.73 11.96,11.96 28.48,19.35 46.73,19.35 18.25,0 34.77,-7.4 46.73,-19.35 11.96,-11.96 19.35,-28.48 19.35,-46.73 0,-3.57 2.9,-6.47 6.47,-6.47 3.57,0 6.47,2.9 6.47,6.47 0,21.82 -8.85,41.58 -23.15,55.88 -14.3,14.3 -34.06,23.15 -55.88,23.15 -21.82,0 -41.58,-8.85 -55.88,-23.15 -14.3,-14.3 -23.15,-34.06 -23.15,-55.88 0,-21.82 8.85,-41.58 23.15,-55.88 14.3,-14.3 34.06,-23.15 55.88,-23.15z"/>
</g>
</svg>