Is there a way to fill the sl-progress-ring

[Jaylyn-Barbee]

Something similar to this? If not, is it something that we could see soon?

[claviska]

You can slot some content into it. Check out this example.

[Jaylyn-Barbee]

The issue I am having with slotting in the content is the background color is overlapping the indicator

[claviska]

Give this a try.

sl-progress-ring {
  --track-width: 12px;
  --track-color: #e4e4e7;
  --indicator-color: #e6c058;
  font-size: 20px;
  font-weight: bold;
  color: #4f44b5;
}

sl-progress-ring::part(base) {
  background: #fefaed;
  border-radius: 50%;
}

View on CodePen

[Jaylyn-Barbee]

Sorry I am replying to this super late, but I am giving this a try now and I run into issues when the track and the indicator are different sizes

you'll notice it bleeds over the track.

[claviska]

Had to get a little creative, but here you go. We can't apply a background color to the host element because it surrounds both SVGs, so I used a pseudo element and sized it accordingly.

sl-progress-ring {
  /* ... */
  --indicator-width: 18px;
  position: relative;
}

sl-progress-ring::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: calc(var(--indicator-width) / 2);
  left: calc(var(--indicator-width) / 2);
  width: calc(var(--size) - var(--indicator-width));
  height: calc(var(--size) - var(--indicator-width));
  background-color: #fefaed;
}

View the CodePen

[Jaylyn-Barbee]

Thanks for the update!