CSS arc rounded at the ends

Question

I'm trying to draw an animated arc around a CSS styled text, which looks like a rounded icon.

Since it could be either an arc or a circle (because the rounded icon inside would hide the internal part of it), there are several solutions using only CSS, like this, or this.

But I would like the line to be rounded at the ends. Something like this:

I'm not sure if it is possible. Any ideas?

Answer 1

Here's a canvas way of drawing it with an animation. A key part is being able to round the line's end caps with context.lineCap = "round";:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2
var radius = 50;
var startAngle = (Math.PI / 180) * -90
var endAngle = 180
context.lineWidth = 15;
context.lineCap = "round";
var ctr = -90;
var clr = setInterval(function () {
    context.clearRect(0, 0, 300, 150); // clear canvas
    context.beginPath();
    context.arc(x, y, radius, startAngle, (Math.PI / 180) * ctr, false);
    context.stroke();
    ctr++;
    if (ctr == endAngle) clearInterval(clr)
}, 10)

canvas {
    border:1px solid #999;
}

<canvas id="myCanvas" width="300" height="150"></canvas>

Answer 2

http://jsfiddle.net/k6d17fez/1/

Okay, so I ripped off part of this already working solution and added these two blocks of code:

.wrapper::after{
    content:'';
    display:block;
    width:5px;
    height:5px;
    background:#004466;
    border-radius:50%;
    position:relative;
    left:123px;
    z-index:1000;
}

.wrapper .spinner::after{
    content:'';
    display:block;
    width:5px;
    height:5px;
    background:#004466;
    border-radius:50%;
    position:relative;
    left:118px;
    top:-5px;
    z-index:1000;
}

It essentially adds two little circles at the ends of the circumference of the pie.

This is what it looks like in Firefox 37.0.1:

This solution may be a little bit “quick and dirty” but it does the job. Of course Canvas is far more suitable for this.