Horizontal Progress Bar

[sudheeshb]

Hello,

I am trying to add the horizontalprogress widget for the video playback. I couldn't succeed yet. I have the following questions. I am relatively new to web development.

1. Do you have any sample code which demonstrate the usage of horizontalProgressbar?.
2. Do we need to add css styling for the xxx_left and xxx_inner elements of the horizontalprogress bar?. (I tried adding this) If yes, how?
3. The issue is I see the progress bar UI element only if I add the label to it. I don't see any movement of the progress bar inner element. I used setInterval to invoke function which updates the progress bar via setValue in every second. The value used for setValue is 0.05, 0.1, 0,15 etc.
4. The testing is done in PC using chrome and firefox with default configuration. Tried with styletopleft and css3 animations.

Any help is really appreciated.

[ianarundale]

Hi sudheeshb,

The short answer to your questions is we do not have any sample code or example usage for the progress bar at this time, but thank you for pointing out a gap in our documentation that could be improved. We will try to correct this as soon as possible.

Thanks for raising this issue and apologies for the slow reply. Ian

[charafsalmi]

Hi !

Still no improvment ?

This HP component seems to do not work at all.

Please, would you provide any more information or any example of this component used any where ?

Thanks !

[EinLama]

Hi,

the component works, but seems to be broken unless you apply proper CSS. This is an example of how I got it working for me.

Create the widget in your component:

this._progress = new HorizontalProgress("videoProgress", false, 0);
this._progress.setValue(0.5);
this.appendChildWidget(this._progress);

And now apply some CSS to make it visible:

#videoProgress {
  min-height: 10px;
  background: #555;
}
#videoProgress_left {
  min-height: 10px;
  background: #999;
}
#videoProgress_inner {
  width: 10px;
  min-height: 10px;
  background: #ddd;
  position: relative;
}

I hope that helps.

[jonpbbc]

Hi,

I've added an example of the progress bar to https://github.com/fmtvp/talexample using the approach outlined by EinLama.

Regards,

Jon P