Progress Indicators

onyx.ProgressBar

onyx.ProgressBar is an enyo.Control that shows the current progress of a process in a horizontal bar.

{kind: "onyx.ProgressBar", progress: 40}

To animate changes, call the animateProgressTo method:

this.$.progressBar.animateProgressTo(60);

To customize the visual styling of the bar, set a CSS style via the barClasses property, e.g.:

{kind: "onyx.ProgressBar", barClasses: "onyx-dark", progress: 40"}

When the showStripes property is true (the default), stripes are shown in the progress bar; when animateStripes is true (also the default), these stripes are animated. The animated stripes use CSS3 gradients and animation to produce the effects; in browsers that do not support these features, the effects will not be visible.

onyx.ProgressButton

onyx.ProgressButton extends onyx.ProgressBar, adding a Cancel button, as well as the ability to contain other controls.

enyo.kind({
    name: "ProgressButtonExample",
    components: [
        {kind: "onyx.ProgressButton", barClasses: "onyx-light", progress: 20,
            onCancel: "processCanceled", components: [
                {content: "0"},
                {content: "100", style: "float: right;"}
            ]
        }
    ],
    processCanceled: function(inSender, inEvent) {
        // respond to cancellation
    }
});

When tapped, the Cancel button fires an onCancel event, which you may handle as in the example above.

onyx.Slider

onyx.Slider, another kind that extends onyx.ProgressBar, is a control that presents a range of selection options in the form of a horizontal slider with a control knob. The knob may be tapped and dragged to the desired location.

{kind: "onyx.Slider", value: 30}

onChanging events are fired while the control knob is being dragged, and an onChange event is fired when the position is set, either by finishing a drag or by tapping the bar.