HTML/CSS圆形边框渐变与圆角设置及加载动画实现方案

我用HTML和CSS实现了一款加载用的圆形边框旋转动画，代码如下：

HTML代码 #

<div class="spin"></div>

CSS代码 #

@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;
}

原效果如下：

现在需要解决两个技术问题：

1. 如何为该圆形边框设置渐变颜色？
2. 如何为该圆形边框设置圆角？

预期效果为带有渐变色彩和自然圆角过渡的旋转加载动画。

最终我通过SVG文件实现了预期效果，代码如下：

SVG代码 #

<?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>

实现后的效果：

内容的提问来源于stack exchange，提问作者Mohammad Komaei