Class: Progress

Progress

Class that represents a PixiJS Progress.

new Progress (opts)

Creates an instance of a Progress.

Name Type Description
opts object optional

An options object to specify to style and behaviour of the progress.

Name Type Default Description
id number auto generated optional

The id of the progress.

app PIXIApp window.app optional

The app where the progress belongs to.

width number optional

The width of the progress bar. When not set, the width is the size of the app minus 2 * opts.margin.

height number 2 optional

The height of the progress bar.

theme string | Theme dark optional

The theme to use for this progress. Possible values are dark, light, red or a Theme object.

margin number 100 optional

The outer spacing to the edges of the app.

padding number 0 optional

The inner spacing (distance from icon and/or label) to the border.

fill number Theme.fill optional

The color of the progress background as a hex value.

fillAlpha number Theme.fillAlpha optional

The alpha value of the background.

fillActive number Theme.primaryColor optional

The color of the progress background when activated.

fillActiveAlpha number Theme.fillActiveAlpha optional

The alpha value of the background when activated.

stroke number Theme.stroke optional

The color of the border as a hex value.

strokeWidth number 0 optional

The width of the border in pixel.

strokeAlpha number Theme.strokeAlpha optional

The alpha value of the border.

strokeActive number Theme.strokeActive optional

The color of the border when activated.

strokeActiveWidth number 0 optional

The width of the border in pixel when activated.

strokeActiveAlpha number Theme.strokeActiveAlpha optional

The alpha value of the border when activated.

background boolean false optional

The alpha value of the border when activated.

backgroundFill number Theme.background optional

A textstyle object for the styling of the label. See PIXI.TextStyle for possible options.

backgroundFillAlpha number 1 optional

A textstyle object for the styling of the label when the progress is activated. See PIXI.TextStyle for possible options.

radius number Theme.radius optional

The radius of the four corners of the progress (which is a rounded rectangle).

destroyOnComplete boolean true optional

Should the progress bar destroy itself after reaching 100 %?

visible boolean true optional

Is the progress initially visible (property visible)?

See:
Example
// Create the progress
const progress = new Progress({
    app: app
})

// Add the progress to a DisplayObject
app.scene.addChild(progress)

Extends

  • PIXI.Container

Members

progress number

Gets or sets the progress. Has to be a number between 0 and 100.

Methods

Hides the progress (sets his alpha values to 1).

Returns:
Type Description
Progress A reference to the progress for chaining.

Should be called to refresh the layout of the progress. Can be used after resizing.

Returns:
Type Description
Progress A reference to the progress for chaining.

Shows the progress (sets his alpha values to 1).

Returns:
Type Description
Progress A reference to the progress for chaining.