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:

enter image description here

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

Your next option should be svg IMHO http://caniuse.com/#feat=svg-html5 — Kerstomaat, Apr 13 '15 at 19:43
Should this be animated or is it always static 270° like this? — Sebastian Simon, Apr 13 '15 at 19:46
@Xufox - Animated. I forgot to say it. I've updated my question. — Manolo, Apr 13 '15 at 19:48
@SimonPlus - Well, I think that I just need http://caniuse.com/#feat=canvas — Manolo, Apr 13 '15 at 19:50
@RokoC.Buljan - All right, but what's the reason? Just browser compatibility? or memory/CPU waist too? — Manolo, Apr 13 '15 at 19:53
Yeah, the only reason I proposed svg was because I thought canvas doesn't have a way to set the lineCap and svg does... Seems I was wrong ;) [example](https://developer.mozilla.org/samples/canvas-tutorial/4_6_canvas_linecap.html) — Kerstomaat, Apr 13 '15 at 19:55
https://youtu.be/SeLOt_BRAqc?list=PLQWB7UtRMkHP4rQ4CVaCsP2mv3GC_HGFX ruff but useful — Roko C. Buljan, Apr 13 '15 at 19:58

score 9 · Answer 1 · answered Apr 13 '15 at 20:00

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>

Yeah, I already knew how to do it. I asked about a CSS solution. Anyway +1 for your work. — Manolo, Apr 13 '15 at 20:02

score 2 · Accepted Answer · edited May 23 '17 at 12:28

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:

Rounded Corners

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

edited May 23 '17 at 12:28

Community

1
1

answered Apr 13 '15 at 20:12

Sebastian Simon

18,263
7
55
75

I just see a dot in your fiddle. – Manolo Apr 13 '15 at 20:18
What?! It looks okay in Firefox 37.0.1… – Sebastian Simon Apr 13 '15 at 20:22
1

@Manolo probably cause you need to see it in Firefox and add -vendor-prefixes for other browsers – Roko C. Buljan Apr 13 '15 at 20:22
1

@Xufox - Yes, it looks okay in Firefox. I'll mark as answered, but I'll finally go with canvas. – Manolo Apr 13 '15 at 20:29

CSS arc rounded at the ends

2 Answers2