SVG circle with a stroke that has a gradient tail - svg

Question

The below is what I have.
The only thing I need is to have the top be a fill. So 12'O clock it's supposed to be a fill and ad 6'O clock it should end with a gradient.
What's the best way to achieve this?
(The idea is to animate this so that it rotates in the next step.)
Codepen
<div id="container">
<svg idq="svg-spinner" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<defs>
<linearGradient id="grad1" x1="0.01" y1="0.1">
<stop offset="0" stop-color="#fff"></stop><stop offset="50%" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" stroke="url(#grad1)" stroke-width="10" fill="none"></circle>
</svg>
</div>
</div>

Answer 1

I managed to solve it myself.
I resorted to a clip-path and that worked out great in my case:
<div id="container">
<svg id="svg-spinner" width="100" height="100">
<defs>
<clipPath id="cut-off">
<rect x="0" y="50" width="100" height="100" />
</clipPath>
<linearGradient id="gradient">
<stop offset="0" stop-color="#59b189"></stop>
<stop offset="75%" stop-color="#59b189" stop-opacity="0"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" stroke="#eff8f3" stroke-width="10" fill="none" opacity="1"></circle>
<circle cx="50" cy="50" r="40" stroke="url(#gradient)" stroke-width="10" fill="none" clip-path="url(#cut-off)"></circle>
</svg>
</div>
</div>