相关疑难解决方法(0)

我想在我的网站上放一个由脚本触发的简单加载指示器.它应该是一个简单的圆弧,它有一个渐变,并在用户等待时旋转.我还没有尝试动画部分,但现在却陷入了静态样式.这是我到目前为止所得到的:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
        width="100" height="100">
        <defs>
            <linearGradient id="grad1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="red" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M50 10  A40 40 0 1 0 90 50"
            stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
    </svg>

它绘制弧线,从顶部边缘逆时针到右边缘(270°),但梯度是错误的.而不是跟随路径使得开始(顶部边缘,0°)是不透明的并且末端(右边缘,270°)是透明的,所得到的弧形笔划的图像在屏幕空间中从左到右着色.

如何使渐变跟随我的弧形路径？

我想用CSS3或JavaScript创建一个环形流程微调器,类似于Android中的加载进度微调器.

旋转器应连续旋转并填充沿边缘逐渐消失的纯色(即圆锥形渐变),如下图所示:

我怎样才能做到这一点？