diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt
index 160df74e16..2684baf62c 100644
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -47,6 +47,7 @@ export const DIRECTIVES = [
d.IonNavPush,
d.IonNavSetRoot,
d.IonNote,
+ d.IonProgressBar,
d.IonRadio,
d.IonRadioGroup,
d.IonRange,
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index f4ccdbbe29..9bbd4bfa57 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -558,6 +558,17 @@ export class IonNote {
}
}
+export declare interface IonProgressBar extends StencilComponents<'IonProgressBar'> {}
+@Component({ selector: 'ion-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'type', 'reversed', 'value', 'buffer', 'color'] })
+export class IonProgressBar {
+
+ constructor(c: ChangeDetectorRef, r: ElementRef) {
+ c.detach();
+ const el = r.nativeElement;
+ proxyInputs(this, el, ['mode', 'type', 'reversed', 'value', 'buffer', 'color']);
+ }
+}
+
export declare interface IonRadio extends StencilComponents<'IonRadio'> {}
@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'name', 'disabled', 'checked', 'value'] })
export class IonRadio {
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index ee858846aa..64d0ee8751 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -56,6 +56,7 @@ const DECLARATIONS = [
d.IonNavPush,
d.IonNavSetRoot,
d.IonNote,
+ d.IonProgressBar,
d.IonRadio,
d.IonRadioGroup,
d.IonRange,
diff --git a/core/api.txt b/core/api.txt
index 24d0d6de69..2c9d5da752 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -742,6 +742,17 @@ ion-popover,event,ionPopoverDidUnload,void,true
ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
ion-popover,event,ionPopoverWillPresent,void,true
+ion-progress-bar
+ion-progress-bar,prop,buffer,number,1,false
+ion-progress-bar,prop,color,string | undefined,undefined,false
+ion-progress-bar,prop,mode,"ios" | "md",undefined,false
+ion-progress-bar,prop,reversed,boolean,false,false
+ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false
+ion-progress-bar,prop,value,number,0,false
+ion-progress-bar,css-prop,--background
+ion-progress-bar,css-prop,--buffer-background
+ion-progress-bar,css-prop,--progress-background
+
ion-radio-group
ion-radio-group,prop,allowEmptySelection,boolean,false,false
ion-radio-group,prop,name,string,this.inputId,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 6fcce7bf8e..03b1d1e821 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3181,6 +3181,59 @@ export namespace Components {
'translucent'?: boolean;
}
+ interface IonProgressBar {
+ /**
+ * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+ */
+ 'buffer': number;
+ /**
+ * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+ */
+ 'color'?: Color;
+ /**
+ * The mode determines which platform styles to use.
+ */
+ 'mode': Mode;
+ /**
+ * If true, reverse the progress bar direction.
+ */
+ 'reversed': boolean;
+ /**
+ * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+ */
+ 'type': 'determinate' | 'indeterminate';
+ /**
+ * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+ */
+ 'value': number;
+ }
+ interface IonProgressBarAttributes extends StencilHTMLAttributes {
+ /**
+ * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+ */
+ 'buffer'?: number;
+ /**
+ * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+ */
+ 'color'?: Color;
+ /**
+ * The mode determines which platform styles to use.
+ */
+ 'mode'?: Mode;
+ /**
+ * If true, reverse the progress bar direction.
+ */
+ 'reversed'?: boolean;
+ /**
+ * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+ */
+ 'type'?: 'determinate' | 'indeterminate';
+ /**
+ * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+ */
+ 'value'?: number;
+ }
+
interface IonRadioGroup {
/**
* If `true`, the radios can be deselected.
@@ -5165,6 +5218,7 @@ declare global {
'IonPicker': Components.IonPicker;
'IonPopoverController': Components.IonPopoverController;
'IonPopover': Components.IonPopover;
+ 'IonProgressBar': Components.IonProgressBar;
'IonRadioGroup': Components.IonRadioGroup;
'IonRadio': Components.IonRadio;
'IonRange': Components.IonRange;
@@ -5265,6 +5319,7 @@ declare global {
'ion-picker': Components.IonPickerAttributes;
'ion-popover-controller': Components.IonPopoverControllerAttributes;
'ion-popover': Components.IonPopoverAttributes;
+ 'ion-progress-bar': Components.IonProgressBarAttributes;
'ion-radio-group': Components.IonRadioGroupAttributes;
'ion-radio': Components.IonRadioAttributes;
'ion-range': Components.IonRangeAttributes;
@@ -5665,6 +5720,12 @@ declare global {
new (): HTMLIonPopoverElement;
};
+ interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {}
+ var HTMLIonProgressBarElement: {
+ prototype: HTMLIonProgressBarElement;
+ new (): HTMLIonProgressBarElement;
+ };
+
interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {}
var HTMLIonRadioGroupElement: {
prototype: HTMLIonRadioGroupElement;
@@ -5948,6 +6009,7 @@ declare global {
'ion-picker': HTMLIonPickerElement
'ion-popover-controller': HTMLIonPopoverControllerElement
'ion-popover': HTMLIonPopoverElement
+ 'ion-progress-bar': HTMLIonProgressBarElement
'ion-radio-group': HTMLIonRadioGroupElement
'ion-radio': HTMLIonRadioElement
'ion-range': HTMLIonRangeElement
@@ -6048,6 +6110,7 @@ declare global {
'ion-picker': HTMLIonPickerElement;
'ion-popover-controller': HTMLIonPopoverControllerElement;
'ion-popover': HTMLIonPopoverElement;
+ 'ion-progress-bar': HTMLIonProgressBarElement;
'ion-radio-group': HTMLIonRadioGroupElement;
'ion-radio': HTMLIonRadioElement;
'ion-range': HTMLIonRangeElement;
diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md
index 4440ded8ec..323334088d 100644
--- a/core/src/components/nav/readme.md
+++ b/core/src/components/nav/readme.md
@@ -93,13 +93,13 @@ Inserts a component into the nav stack at the specified index. This is useful if
#### Parameters
-| Name | Type | Description |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `insertIndex` | `number` | |
-| `component` | `T` | |
-| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
-| `opts` | `NavOptions \| null \| undefined` | |
-| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
+| Name | Type | Description |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `insertIndex` | `number` | |
+| `component` | `T` | |
+| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
+| `opts` | `NavOptions \| null \| undefined` | |
+| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
#### Returns
@@ -184,12 +184,12 @@ Push a new component onto the current navigation stack. Pass any additional info
#### Parameters
-| Name | Type | Description |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `component` | `T` | |
-| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
-| `opts` | `NavOptions \| null \| undefined` | |
-| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
+| Name | Type | Description |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `component` | `T` | |
+| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
+| `opts` | `NavOptions \| null \| undefined` | |
+| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
#### Returns
@@ -240,12 +240,12 @@ Set the root for the current navigation stack.
#### Parameters
-| Name | Type | Description |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `component` | `T` | |
-| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
-| `opts` | `NavOptions \| null \| undefined` | |
-| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
+| Name | Type | Description |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `component` | `T` | |
+| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | |
+| `opts` | `NavOptions \| null \| undefined` | |
+| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | |
#### Returns
diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss
new file mode 100644
index 0000000000..a7d1951bda
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.ios.scss
@@ -0,0 +1,8 @@
+@import "./progress-bar";
+
+// iOS Progress bar
+// --------------------------------------------------
+
+:host {
+ height: 3px;
+}
diff --git a/core/src/components/progress-bar/progress-bar.md.scss b/core/src/components/progress-bar/progress-bar.md.scss
new file mode 100644
index 0000000000..b681530b2e
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.md.scss
@@ -0,0 +1,8 @@
+@import "./progress-bar";
+
+// Material Design Progress bar
+// --------------------------------------------------
+
+:host {
+ height: 4px;
+}
diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
new file mode 100644
index 0000000000..14685653e7
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -0,0 +1,229 @@
+@import "../../themes/ionic.globals";
+
+// Progress bar
+// --------------------------------------------------
+// Host has no background by default - this will be added to the progress-buffer-bar
+:host {
+ /**
+ * @prop --background: Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
+ * @prop --progress-background: Color of the progress bar
+ * @prop --buffer-background: Color of the buffer bar
+ */
+ --background: #{ion-color(primary, base, 0.2)};
+ --progress-background: #{ion-color(primary, base)};
+ --buffer-background: var(--background);
+ display: block;
+
+ position: relative;
+
+ width: 100%;
+
+ contain: strict;
+ overflow: hidden;
+}
+
+:host(.ion-color) {
+ --progress-background: #{current-color(base)};
+ --buffer-background: #{current-color(base, 0.2)};
+}
+
+// indeterminate has no progress-buffer-bar, so it will be added to the host
+:host(.progress-bar-indeterminate) {
+ background: var(--buffer-background);
+}
+
+// Set the bars to full width and height
+// QUESTION: Can this be simplified?
+.progress,
+.progress-indeterminate,
+.indeterminate-bar-primary,
+.indeterminate-bar-secondary,
+.progress-buffer-bar,
+.progress-buffer-bar:before,
+.buffer-circles {
+ @include position(0, 0, 0, 0);
+ position: absolute;
+
+ width: 100%;
+ height: 100%;
+}
+
+// Determinate progress bar
+// --------------------------------------------------
+.progress,
+.progress-buffer-bar {
+ @include transform-origin(start, top);
+ transition: transform 150ms linear;
+}
+
+// Progress and background bar
+// --------------------------------------------------
+.progress,
+.progress-indeterminate {
+ background: var(--progress-background);
+
+ z-index: 2;
+}
+
+.progress-buffer-bar {
+
+ // It's currently here because --buffer-background has an alpha
+ // Otherwise the buffer circles would be seen through
+ background: #fff;
+
+ z-index: 1; // Make it behind the progress
+
+ &:before {
+ background: var(--buffer-background);
+
+ content: "";
+ }
+}
+
+// MD based animation on indeterminate type
+// --------------------------------------------------
+.indeterminate-bar-primary {
+ @include position(0, 0, 0, -145.166611%);
+ animation: primary-indeterminate-translate 2s infinite linear;
+
+ .progress-indeterminate {
+ animation: primary-indeterminate-scale 2s infinite linear;
+ }
+}
+
+.indeterminate-bar-secondary {
+ @include position(0, 0, 0, -54.888891%);
+ animation: secondary-indeterminate-translate 2s infinite linear;
+
+ .progress-indeterminate {
+ animation: secondary-indeterminate-scale 2s infinite linear;
+ }
+}
+
+// Buffer style
+// --------------------------------------------------
+.buffer-circles {
+ background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
+ background-size: 10px 10px;
+
+ z-index: 0;
+ animation: buffering 450ms infinite linear;
+}
+
+// If reversed is set to true, the animation will be reversed
+// and the bars starting at the top right
+// --------------------------------------------------
+:host(.progress-bar-reversed) {
+ .progress,
+ .progress-buffer-bar {
+ @include transform-origin(end, top);
+ }
+
+ .buffer-circles,
+ .indeterminate-bar-primary,
+ .indeterminate-bar-secondary,
+ .progress-indeterminate {
+ animation-direction: reverse;
+ }
+}
+
+// Animation Keyframes
+// --------------------------------------------------
+// Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
+@keyframes primary-indeterminate-translate {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 20% {
+ animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+
+ transform: translateX(0);
+ }
+
+ 59.15% {
+ animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+
+ transform: translateX(83.67142%);
+ }
+
+ 100% {
+ transform: translateX(200.611057%);
+ }
+}
+
+@keyframes primary-indeterminate-scale {
+ 0% {
+ transform: scaleX(.08);
+ }
+
+ 36.65% {
+ animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
+
+ transform: scaleX(.08);
+ }
+
+ 69.15% {
+ animation-timing-function: cubic-bezier(.06, .11, .6, 1);
+
+ transform: scaleX(.661479);
+ }
+
+ 100% {
+ transform: scaleX(.08);
+ }
+}
+
+@keyframes secondary-indeterminate-translate {
+ 0% {
+ animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
+
+ transform: translateX(0);
+ }
+
+ 25% {
+ animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
+
+ transform: translateX(37.651913%);
+ }
+
+ 48.35% {
+ animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
+
+ transform: translateX(84.386165%);
+ }
+
+ 100% {
+ transform: translateX(160.277782%);
+ }
+}
+
+@keyframes secondary-indeterminate-scale {
+ 0% {
+ animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);
+
+ transform: scaleX(.08);
+ }
+
+ 19.15% {
+ animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);
+
+ transform: scaleX(.457104);
+ }
+
+ 44.15% {
+ animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);
+
+ transform: scaleX(.72796);
+ }
+
+ 100% {
+ transform: scaleX(.08);
+ }
+}
+
+@keyframes buffering {
+ to {
+ transform: translateX(-10px);
+ }
+}
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
new file mode 100644
index 0000000000..4f39d25936
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -0,0 +1,85 @@
+import { Component, ComponentInterface, Prop } from '@stencil/core';
+
+import { Color, Mode } from '../../interface';
+import { clamp } from '../../utils/helpers';
+import { createColorClasses } from '../../utils/theme';
+
+@Component({
+ tag: 'ion-progress-bar',
+ styleUrls: {
+ ios: 'progress-bar.ios.scss',
+ md: 'progress-bar.md.scss'
+ },
+ shadow: true
+})
+export class ProgressBar implements ComponentInterface {
+
+ /**
+ * The mode determines which platform styles to use.
+ */
+ @Prop() mode!: Mode;
+
+ /**
+ * The state of the progress bar, based on if the time the process takes is known or not.
+ * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+ */
+ @Prop() type: 'determinate' | 'indeterminate' = 'determinate';
+
+ /**
+ * If true, reverse the progress bar direction.
+ */
+ @Prop() reversed = false;
+
+ /**
+ * The value determines how much of the active bar should display when the
+ * `type` is `"determinate"`.
+ * The value should be between [0, 1].
+ */
+ @Prop() value = 0;
+
+ /**
+ * If the buffer and value are smaller than 1, the buffer circles will show.
+ * The buffer should be between [0, 1].
+ */
+ @Prop() buffer = 1;
+
+ /**
+ * The color to use from your application's color palette.
+ * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+ * For more information on colors, see [theming](/docs/theming/basics).
+ */
+ @Prop() color?: Color;
+
+ hostData() {
+ const { color, type, reversed, value } = this;
+ return {
+ 'role': 'progressbar',
+ 'aria-valuenow': type === 'determinate' ? value : null,
+ 'aria-valuemin': 0,
+ 'aria-valuemax': 1,
+ class: {
+ ...createColorClasses(color),
+ [`progress-bar-${type}`]: true,
+ 'progress-bar-reversed': reversed,
+ }
+ };
+ }
+
+ render() {
+ if (this.type === 'indeterminate') {
+ return [
+
,
+
+ ];
+ }
+
+ const value = clamp(0, this.value, 1);
+ const buffer = clamp(0, this.buffer, 1);
+
+ return [
+ ,
+ buffer !== 1 && ,
+ ,
+ ];
+ }
+}
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
new file mode 100644
index 0000000000..9368069339
--- /dev/null
+++ b/core/src/components/progress-bar/readme.md
@@ -0,0 +1,68 @@
+# ion-progress-bar
+
+ion-progress-bar is a horizontal progress bar to visualize the progression of an operation and activity. You can choose between two types: `determinate` and `indeterminate`.
+
+## Progress Type
+
+### Determinate
+
+If the percentage of an operation is known, you should use the determinate type. This is the default type and the progress is represented by the `value` property.
+
+A buffer shows circles as animation to indicate some activity. If the `buffer` property is smaller than 1 you can show the addditional buffering progress.
+
+### Indeterminate
+
+If an operation is in progress and it's not necessary to indicate how long it will take.
+
+If you add `reversed="true"`, you receive a query which is used to indicate pre-loading.
+
+
+
+
+## Usage
+
+### Javascript
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------- |
+| `buffer` | `buffer` | If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. | `number` | `1` |
+| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
+| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
+| `reversed` | `reversed` | If true, reverse the progress bar direction. | `boolean` | `false` |
+| `type` | `type` | The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). | `"determinate" \| "indeterminate"` | `'determinate'` |
+| `value` | `value` | The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1]. | `number` | `0` |
+
+
+## CSS Custom Properties
+
+| Name | Description |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background` | Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself. |
+| `--buffer-background` | Color of the buffer bar |
+| `--progress-background` | Color of the progress bar |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/progress-bar/test/basic/e2e.ts b/core/src/components/progress-bar/test/basic/e2e.ts
new file mode 100644
index 0000000000..0ed6a1ec3b
--- /dev/null
+++ b/core/src/components/progress-bar/test/basic/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('progress-bar: basic', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/progress-bar/test/basic?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html
new file mode 100644
index 0000000000..93e8d9ba6e
--- /dev/null
+++ b/core/src/components/progress-bar/test/basic/index.html
@@ -0,0 +1,144 @@
+
+
+
+
+
+ Progress Bar - Basic
+
+
+
+
+
+
+
+
+
+
+
+ Progress Bar - Basic
+
+
+
+
+
+
+
+ Indeterminate
+
+
+
+
+
+
+ Indeterminate with secondary color
+
+
+
+
+
+
+ Indeterminate (reversed)
+
+
+
+
+
+
+ Determinate
+
+
+
+
+
+
+ Determinate (reversed)
+
+
+
+
+
+
+ Determinate (secondary color)
+
+
+
+
+
+
+ Determinate (with no bar background)
+
+
+
+
+
+
+ Determinate (with a custom background)
+
+
+
+
+
+
+ Determinate (change progress with slider)
+
+
+
+
+
+
+ 0
+ 100
+
+
+
+
+
+ Buffer
+
+
+
+
+
+
+ Buffer (reversed)
+
+
+
+
+
+
+ Buffer (without value)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/progress-bar/test/preview/index.html b/core/src/components/progress-bar/test/preview/index.html
new file mode 100644
index 0000000000..9db8284c78
--- /dev/null
+++ b/core/src/components/progress-bar/test/preview/index.html
@@ -0,0 +1,128 @@
+
+
+
+
+
+ Progress Bar - Preview
+
+
+
+
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+ Progress bar output
+
+
+
+
+ Value
+
+
+
+ 0
+ 100
+
+
+
+
+ Reversed?
+
+
+
+
+
+ Color
+
+
+
+ Primary (default)
+
+
+
+
+ Secondary
+
+
+
+
+ Tertiary
+
+
+
+
+
+
+ Type
+
+
+
+ determinate (default)
+
+
+
+
+ indeterminate
+
+
+
+
+
+ Set Buffer value
+
+
+
+ 0
+ 100
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/progress-bar/test/standalone/index.html b/core/src/components/progress-bar/test/standalone/index.html
new file mode 100644
index 0000000000..9345b2edd9
--- /dev/null
+++ b/core/src/components/progress-bar/test/standalone/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Progress Bar - Standalone
+
+
+
+
+
+
+
+ Default Progress Bar
+
+
+ Default Progress Bar with 50% width
+
+
+ Colorize Progress Bar
+
+
+
+ Other types
+
+
+
+
+
diff --git a/core/src/components/progress-bar/usage/javascript.md b/core/src/components/progress-bar/usage/javascript.md
new file mode 100644
index 0000000000..976f5d44ac
--- /dev/null
+++ b/core/src/components/progress-bar/usage/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 29e4609501..77e6b363dc 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -32,6 +32,7 @@ export const config: Config = {
{ components: ['ion-nav', 'ion-nav-pop', 'ion-nav-push', 'ion-nav-set-root'] },
{ components: ['ion-img'] },
{ components: ['ion-popover', 'ion-popover-controller'] },
+ { components: ['ion-progress-bar'] },
{ components: ['ion-radio', 'ion-radio-group'] },
{ components: ['ion-range'] },
{ components: ['ion-refresher', 'ion-refresher-content'] },