Split CSS circle into 3 equal parts with linear gradients - pie chart style
<p>I'm trying to create a progress indicator - and to a certain extent I've done it, but it's not what I want to end up with. Here's an image:</p>

<p><a href="https://i.stack.imgur.com/n3yVE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3yVE.jpg" alt="enter image description here"></a></p>

<p>As you can see the indicator shows 1 third, 2 thirds, then full. This is what I want to achieve except that I want the first, second and third sections to be different colors, so I would end up with 3 equal slices in 3 different colors starting at 12 o'clock.</p>

<p>Here's the code - I've removed the centre section because it's not relevant to the question: (<strong><em>the CSS is in Less syntax</em></strong>)</p>

<pre><code>.timeline {
    h3 {
        position:relative;

        &amp; &gt; .step {
            background-color:@accentColor;
            background-clip:padding-box;
            border:solid 1px @divider;
            border-radius:50%;
            height:52px;
            position:absolute;
            top:0;
            left:0;
            width:52px;

            &amp;.one {
                background-image: linear-gradient(210deg, transparent 50%, white 50%),
                    linear-gradient(90deg, white 50%, transparent 50%);
            }
            &amp;.two {
                background-image: linear-gradient(90deg, transparent 50%, @accentColor 50%),
                    linear-gradient(144deg, white 50%, transparent 50%);
            }
            &amp;.three {}
        }
    }
}

&lt;div class="timeline"&gt;
    &lt;h3&gt;&lt;span class="step one"&gt;&lt;/span&gt;&lt;/h3&gt;
    &lt;h3&gt;&lt;span class="step two"&gt;&lt;/span&gt;&lt;/h3&gt;
    &lt;h3&gt;&lt;span class="step three"&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<p>I'm not really undersanding the interaction between the gradients, and despite several edits I'm no nearer to any kind of solution.</p>

<p>Is this possible using linear gradients or do I need to look again?</p>