WebProgressBar is able to make the bar rounded corner. In indeterminate mode, WebProgressBar provides properties to control the animation which are Step and AnimationLatency.

This topic will show you how to modify WebProgressBar rounded corner and indeterminate animation.

To modify WebProgressBar rounded corner

1. Right-click on WebProgressBar control and choose Properties.
2. Set UseRoundCorner to True.
3. You need to use the border-radius CSS 3 property in order to make the progress bar more/less rounded. Put the following code in the ProgressContainerBarStyle and ProgressBarStyle custom rules.
   
   <ProgressContainerBarStyle CustomRules="-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;">
   </ProgressContainerBarStyle>
   
   <ProgressBarStyle CustomRules="-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;">
   </ProgressBarStyle>
   
   
4. Run the project.

To modify WebProgressBar indeterminate animation

1. Right-click on WebProgressBar control and choose Properties.
2. Set Step property to determine how far the ProgressBar will move after each tick. The default value is 0.01.
3. Set AnimationLatency to determine how fast is the next tick. The default value is 500 ms.
4. Run the project.