Circular Progress Bar

[Eyal Noam]

Hi,
I wondered if i can reach to this result with the rad progress bar (see attached file).
I have tried to reach to this result without success....

[Alex Fidanov]

Hi Shmuel Tal,

Creating a progress bar with that shape will require a complete change of the ControlTemplate of the ProgressBar and providing a custom logic for resolving the actual value in the ProgressBar's new template. Have you looked at our BusyIndicator as an alternative? Nevertheless, we will try to find some quick and simple way to modify the ProgressBar for this requirement and post a sample project here.

Regards,
Alex Fidanov
the Telerik team

[Alex Fidanov]

Hello Shmuel Tal,

In fact, in the Expression Dark theme, the style for the busy indicator is a circle. You can set its progress value from 0 to 100 and set the IsIndeterminate to false. If you want to display the value of the progress, you would have to edit the theme and use a TextBlock, bound to the ProgressValue property in the center.

<telerik:RadBusyIndicator IsBusy="True" IsIndeterminate="False" BusyContent="{Binding Path=ProgressValue}"
Width="100" Height="100"
telerik:StyleManager.Theme="Expression_Dark" ProgressValue="30" />

Kind regards,
Alex Fidanov
the Telerik team

[karteek]

i would like to know how I can increase the height and width of the ring and also the color which is displayed inside the ring. the Height and Width properties are applied at the control level but not exclusively for the ring. any help on this is appreciable.

[Kalin]

Hello Karteek,

What I can suggest you would to be to check this forum post where is explained how to make the ring smaller. Using the same approach the other way around will help you to achieve the required. As for the color inside of the ring you will have to modify the fill of the Rectangle named ProgressBarIndicator as needed.

Hope this helps.

Regards,
Kalin
Telerik