Inner shadow progress bar

I have a circle progress bar code with HTML & CSS, I would like to grey circle with inner shadow and circle progress bar starting and end with rounded, I have attached the image for reference, please help.


`
Highcharts.chart(‘container1’, {
title: {
text: ”
},
subtitle: {
text: `<div style=’font-size: 40px;color:#17A0A7!important;’ >@ViewBag.FinalPer% </div> <span class=’description-institute’> COMPLETED </span>`,
align: “center”,
verticalAlign: “middle”,
style: {
“textAlign”: “center”
},
x: 0,
y: -2,
useHTML: true
},
series: [{
type: ‘pie’,
colors: [
‘#ffc20e’
],
enableMouseTracking: false,
innerSize: ‘80%’,
dataLabels: {
enabled: false
},
data: [{
y: @ViewBag.FinalPer
}, {
y: [email protected],
color: ‘#e3e3e3’
}]
}]
});
`

`<script src=”https://code.highcharts.com/highcharts.js”></script>
<div style=”width:300px;height:400px; margin-top: -150px;margin-bottom:50px”>
<div id=”container1″ style=”height:540px;”></div>
</div>
`

This is one of the frequently asked HTML interview questions.

Also in #Full-stackDeveloper _↴