Border gradient with radius and transparency-CodePudding

I want to do something like this:

I want a border-radius, transparency (to see the background), and the possibility to fill from 0% to 100% the border.

For the moment, I have this code:

body{
    background: lightgrey;
}

.avatar{
    padding: 10px;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.avatar:before{
    width: 180px;
    aspect-ratio: 1;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 8px;
    border-radius: 100%;
    background: linear-gradient(to top, transparent 25%, blue 25%, blue);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: clear;
    mask-composite: clear;
}

<html>
    <body>
        <div ></div>
    </body>
</html>

How is it possible to fill X% of the border?

Thank you!

CodePudding user response：

This is called a radial progress bar is case you want to search for more examples. Here is a small example:

div {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red var(--progress), gray 0deg);
  font-size: 0;
}

div::after {
  content: attr(data-progress) '%';
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}

<div data-progress="80" style="--progress: 80%;"></div>

Here is a better solution based on what you asked.

Hope that helps.

CodePudding user response：

try like below,

   body{
        background: lightgrey;
    }
    
    .avatar{
        padding: 10px;
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .avatar:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to top, transparent 25%, blue 25%, blue);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: clear;
        mask-composite: clear;
    }
    .mainside{
        
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .mainside:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: 9;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to right, transparent 90%, #878789 25%, #adadad);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: clear;
        mask-composite: clear;
    }

    <html>
        <body>
            <div >
                <div ></div>
            </div>
            
        </body>
    </html>