Progress Indicator

WorkWithPlus provides the possibility to include Progress Indicators with different styles. This user control is really useful to create Dashboards by combining them with other controls like Charts and Grids.

PIImg03

This user control has two available flavours: cards and bars. You can also customize the look&feel of the control and the percentage that will shown.

PIImg01

 

The porcentage can be also set dynamically by adding the following code int the Events tab:

PIImg02

 

Properties of User Control Progress Indicator:

User Control Control Name ProgressIndicatorImg05
User Control

User Control Properties

Location in father container Cell control name
Cell theme class
Column span
Row span
Align
Start Col/Fst Avail
Merge With Previous Cell

Control Name

Name of Control Name

User Control

DVelop.GXBootstrap.DVProgressIndicator

User Control Properties

Circle:

Type

ProgressIndicatorImg06

CircleCaptionType

Caption

Cls

Percentage

CircleWidth

CircleProgressWidth

AnimateOnStart

Bar:

Type

ProgressIndicatorImg07

Caption

Cls

Percentage

BarWidth

AnimateOnStart

 

Type


Two possible values
  • Circle
  • Bar

CircleCaptionType

Caption

  • Enable Caption property

Caption and Subtitle

  • Enable Caption and Subtitle properties

Raw HTML

  • Enable Raw HTML

Caption

Text inside bar or circle

Subtitle

Text shown below Caption. Visible If CircleCaptionType = CaptionAndSubtitle.

Raw HTML

It allows inserting html code for the description. Visible If CircleCaptionType = RawHTML

Cls

WorkWithTheme Custom Class

Percentage

Value 0-100 that indicate the progress of bar/circle indicator.

CircleWidth

Circle diameter.

BarWidth

Length of the bar inside the parent container.
0%-100% values allowed.

CircleProgressWidth

Circle bar thickness.

AnimateOnStart

If show an animation when the control is initialized.