How to make border with percentage bar

Question

I don't even know how to describe it really, so here's the picture. Yeah, something like that. I mean the round border, but like only a part of it is red. Also, I don't want it to be animated or anything, so is it possible to make it only with CSS and HTML, with no JavaScript?
Would love to get some help here!

This answer seems to cover what you're after https://stackoverflow.com/questions/14222138/css-progress-circle — dav0r, Mar 03 '19 at 03:02

score 0 · Accepted Answer · answered Mar 03 '19 at 04:48

0

I think this can help you.

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body{
    background:yellow;
    }
    .image{
    height:100px;
    width:100px;
    margin:auto;
    border-radius:50%;
    border:10px solid red;
    border-left:10px solid transparent;
    padding:15px;
    transform:rotate(45deg);
    }
    img{
    width:100%;
    height:100%;
    border-radius:50%;
    transform:rotate(-45deg);
    }
    </style>
    </head>
    <body>
    <div class="image" >
    <img src="img.jpg" />
    </div>
    </body>
    </html>

answered Mar 03 '19 at 04:48

Prateek Chaubey

166
1
4
16

And you can also add :after and :before to add more border. – Prateek Chaubey Mar 03 '19 at 04:50
Thank you very much! This works perfectly! – Illia Canele Mar 03 '19 at 11:45

How to make border with percentage bar

1 Answers1