search

crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
741 stars 173 forks source link

Img background #174

Open wuilmerj24 opened 5 years ago

wuilmerj24 commented 5 years ago

how to place the image at the background of the circle

similar to this first image on the left octopus_step3

wuilmerj24 commented 5 years ago

Ping

crisbeto commented 5 years ago

@wuilmerj24 you should be able to get the same result by setting a background image on the round-progress element:

round-progress {
  background-image: url(./path-to-image);
  border-radius: 100%;
}
Eraldo commented 4 years ago

@crisbeto Thank you for sharing your workaround.

The challenge I have with that solution is that the outer part of the background is not visible since it is covered by the progress circle.

I played with the css for a few hours and was not able to get it the way I would like it to have: That the background starts at the inner edge of the progress circle.

Any ideas? :)