Partial Arc around an image with html / css / js / jquery / angularjs

Question

I would like to have a partial arc around an image, and as the time goes the arc is getting smaller and smaller:

Any ideas? Thanks

Update

After seeing in the comments that people insist for introducing what effort I've made by myself in order to try to achieve that here's the code I wrote, but it was not the way I wanted it to be: HTML:

<div style="position:relative;">
<img style="position:absolute; width:100px; height:100px; border-radius:50%;left:50px;top:50px;" src="http://iv1.lisimg.com/image/522888/408full-adriana-lima.jpg" />
<canvas id="myCanvas" style="background-color:red;" width="500" height="500"></canvas>

JS:

var imgSurrounder = function () {


                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.beginPath();
                ctx.arc(100, 100, 50, 0, 2 * Math.PI);
                ctx.lineWidth = 30;
                ctx.strokeStyle = "#000";
                ctx.stroke();

                ctx.lineWidth = 40;


                var j = 0;
                var i = 0;
                var num = 50;
                var s = 0;
                var step = 2 * Math.PI / num;
                var e = (i + 1) * step;

                var drawStroke = function () {
                    //console.log(j++);
                    ctx.beginPath();
                    ctx.arc(100, 100, 50, s, e);
                    ctx.strokeStyle = "#fff";
                    ctx.stroke();
                    i++;
                    if (i === num) {
                        return;
                    }
                    s = e - 0.5 * step;
                    e = (i + 1) * step;
                    setTimeout(drawStroke, 1000);
                }
                setTimeout(drawStroke, 10);
            }
        },

The results was:

But you can see that it's not so clean an neat. In addition, if such profile images are spread closely to each other the rectangular canvas is not so convenient to draw in. I was feeling that I'm not doing it in the right way and that there was a better way.

But I don't know if I really should write all this stuff in the question because I'm afraid that people won't read it because it's too long and then I'll be stuck with no answer as I a few questions. Therefore I felt that it isn't relevant at all to show all my trials here in order to not make my question dirty and keep it clean and focused.

Again, if those are the rules her so of course I respect it. Thanks anyway

At [so] you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a [**Minimal, Complete, and Verifiable example**](//stackoverflow.com/help/mcve). I suggest reading [ask] a good question and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). Also, be sure to take the [tour] and read **[this](//meta.stackoverflow.com/questions/347937/)**. — John Conde, Jun 14 '17 at 11:47
But I really don't have any idea... should I use image's border somehow? I don't have any clue.. I tried with drawing in canvas but it doesn't look good — Shimon Topach, Jun 14 '17 at 11:49
Why don't you try familiarising yourself with the rules of SO. If you do, you wouldn't post a question like this and then you wouldn't get downvoted — Pete, Jun 14 '17 at 11:51
Ok folks, listen to me, I do know how to post questions and write my own code ok? Here's an example: https://stackoverflow.com/questions/41419811/live-streaming-webcam-webm-stream-using-getusermedia-by-recording-chunks-with?noredirect=1#comment74767062_41419811 But in this one I really don't have any clue, so instead of simply downvoting my question so that I won't get any answer her I think that there are nicer people over here that do have a clear answer or reference fine? I've been googling a lot but I didn't find anything that makes it like in those images. Please, — Shimon Topach, Jun 14 '17 at 11:57
I'm just asking a question that instead of describing some markup with img and pushing a little css of border-radius: 50% and border props which can't describe what I'm looking for and is truly not the right direction - I just posted the images and if you don't know how to answer that so it's also fine, but there's no need to dirty my question! — Shimon Topach, Jun 14 '17 at 11:57
Search Internet and receive, use css animation:https://codepen.io/kyledws/pen/Gvelt — tik27, Jun 14 '17 at 12:01
@ShimonTopach You don't get any answer because people can't see what effort you make yourself to solve or create this. — Carsten Løvbo Andersen, Jun 14 '17 at 12:05
Thank you very much, I've been googling for more than a few days but only found semi circles and stuff like that but not really what I needed. That's exactly what I've been looking for, and the code is totally different that the things I found that were maybe a little similar to that. — Shimon Topach, Jun 14 '17 at 12:06

score 0 · Answer 1 · answered Jun 15 '17 at 10:38

Ok, I found this one to be the exact thing I was looking for:

HTML:

<div class="container">
<div id="activeBorder" class="active-border">
    <div id="circle" class="circle">
        <span id="startDeg" class="0"></span>
    </div>
</div>

JS:

     var draw = function (prec) {
                    $(function drawSector() {
                        var activeBorder = $("#activeBorder");
                        if (prec > 100)


                 prec = 100;
                    var deg = prec * 3.6;
                    if (deg <= 180) {
                        activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
                    }
                    else {
                        activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
                    }

                    var startDeg = $("#startDeg").attr("class");
                    activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
                    $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
                });
            }
            var count = 0;
            setInterval(function () {
                draw(count++);
            }, 100);

Reference: http://jsfiddle.net/wun8T/1/

Partial Arc around an image with html / css / js / jquery / angularjs

1 Answers1