The C1ProgressBar control features thirty-one built in animations. In this topic, you will set the animation, the duration of the animation, and the delay of the animation in Design view, in Source view, and in code.

Configuring Animations in Design View

Complete the following steps:

1. Click the Design button to enter Design view.
2.  Right-click the C1ProgressBar control to open its context menu and select Properties.The Properties window opens with the C1ProgressBar control's properties in focus.
3. In the Properties window, set the following properties:
   •  Set the AnimationOptions.Easing property to EaseOutBounce. This establishes the animation effect.
   •  Set the AnimationOptions.Duration property to '6000'. This establishes the length of the animation.
   •  Set the AnimationDelay property to '500'. This establishes the length of time that will pass before the animation starts.
   •  Set the Value property to '100'. This will cause the progress indicator to fill the track at run time.
4. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.

Configuring Animations in Source View

Complete the following steps:

1. Click the Source button to enter Source view.
2. Add AnimationDelay="500" to the <cc1:C1ProgressBar> tag so that the markup resembles the following:
   <cc1:C1ProgressBar ID="C1ProgressBar1" runat="server" AnimationDelay="500"></cc1:C1ProgressBar>
3. Place the following markup between the <cc1:C1ProgressBar> tags:
   <AnimationOptions Duration="6000" Easing="EaseOutBounce" />
4. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.

Configuring Animations in Code

Complete the following steps:

1. On the Visual Studio toolbar, click View | Code to enter code view.
2. Add the following code to the Page_Load event:

   Visual Basic

   Visual Basic	Copy Code
   'Set animation properties C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; 'Set Value property so that the progress indicator automatically fills at run time C1ProgressBar1.Value = 100

   C#

   C#	Copy Code
   //Set animation properties C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; //Set Value property so that the progress indicator automatically fills at run time C1ProgressBar1.Value = 100;

3. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.