Circle Progress with Image

by tikosar

HTML

<script src="https://unpkg.com/js-circle-progress/dist/circle-progress.min.js" type="module"></script>

<circle-progress value="50" max="100"></circle-progress>

CSS

circle-progress::part(base) {
  width: 300px;
  height: auto;
  background: url("https://images.unsplash.com/photo-1561037404-61cd46aa615b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZG9nfGVufDB8fDB8fHww") no-repeat 78% 45% / cover;
  clip-path: circle();
}

circle-progress::part(circle) {
  stroke: none;
}

circle-progress::part(value) {
  stroke: #261406;
}

circle-progress::part(text) {
  fill: #261406;
  font-weight: bold;
  translate: 0 30px;
}