diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1ed6061abc..148539d336c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 7.1.1
+- **Progress Indicators**:
+    - `igx-circular-bar` and `igx-linear-bar` now feature an indeterminate input property. When this property is set to true the indicator will be continually growing and shrinking along the track. 
 
 
 ## 7.1.2
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss
index 84bae9236a4..b862f5f675b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss
@@ -7,47 +7,19 @@
 ////
 
 /// Linear Progress
-@include b(progress-linear) {
+@include b(igx-linear-bar) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
     @extend %linear-display !optional;
 
-    @include e(bar) {
+    @include e(base) {
         @extend %linear-bar !optional;
     }
 
-    @include e(bar-base) {
-        @extend %linear-bar-base !optional;
-    }
-
-    @include e(bar-progress) {
-        @extend %linear-bar-progress !optional;
-    }
-
-    @include e(bar-progress, $m: default) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--default !optional;
-    }
-
-    @include e(bar-progress, $m: danger) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--danger !optional;
-    }
-
-    @include e(bar-progress, $m: warning) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--warning !optional;
-    }
-
-    @include e(bar-progress, $m: info) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--info !optional;
-    }
-
-    @include e(bar-progress, $m: success) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--success !optional;
+    @include e(indicator) {
+        @extend %linear-indicator !optional;
+        @extend %linear-indicator--default !optional;
     }
 
     @include e(value) {
@@ -80,52 +52,61 @@
         @extend %linear-value--hidden !optional;
     }
 
-    @include m(striped) {
-        @include e(bar-progress) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(danger) {
+        @include e(indicator) {
+            @extend %linear-indicator--danger !optional;
         }
+    }
 
-        @include e(bar-progress, $m: default) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(warning) {
+        @include e(indicator) {
+            @extend %linear-indicator--warning !optional;
         }
+    }
 
-        @include e(bar-progress, $m: danger) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(info) {
+        @include e(indicator) {
+            @extend %linear-indicator--info !optional;
         }
+    }
 
-        @include e(bar-progress, $m: warning) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(success) {
+        @include e(indicator) {
+            @extend %linear-indicator--success !optional;
         }
+    }
+
+    @include m(striped) {
+        @include e(indicator) {
+            @extend %linear-indicator--striped !optional;
+        }
+    }
 
-        @include e(bar-progress, $m: info) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(indeterminate) {
+        @include e(indicator) {
+            @extend %linear-indicator--indeterminate !optional;
         }
 
-        @include e(bar-progress, $m: success) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+        @include e(value) {
+            @extend %linear-value !optional;
+            @extend %linear-value--hidden !optional;
         }
     }
 }
 
 /// Circular Progress
-@include b(progress-circular) {
+@include b(igx-circular-bar) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
     @extend %circular-display !optional;
 
-    @include e(innercircle) {
-        @extend %circular-innercircle !optional;
+    @include e(inner) {
+        @extend %circular-inner !optional;
     }
 
-    @include e(circle) {
-        @extend %circular-circle !optional;
+    @include e(outer) {
+        @extend %circular-outer !optional;
     }
 
     @include e(text) {
@@ -136,4 +117,16 @@
         @extend %circular-text !optional;
         @extend %circular-text--hidden !optional;
     }
+
+    @include m(indeterminate) {
+        @extend %circular-display--indeterminate !optional;
+
+        @include e(outer) {
+            @extend %circular-outer--indeterminate !optional;
+        }
+
+        @include e(text) {
+            @extend %circular-text--hidden !optional;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
index 368b72ebe93..2b669c0743c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
@@ -41,7 +41,7 @@
     $stripes-color: null,
     $text-color: null
 ) {
-    $name: 'igx-progress-linear';
+    $name: 'igx-linear-bar';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
     @return extend($theme, (
@@ -76,33 +76,26 @@
     %linear-display {
         position: relative;
         display: flex;
-        align-items: center;
-        flex-flow: column nowrap;
         width: 100%;
+        flex: 1 1 100%;
     }
 
     %linear-bar {
-        width: inherit;
-        height: $bar-height;
-        overflow: hidden;
-    }
-
-    %linear-bar-base {
         position: absolute;
         width: inherit;
-        height: inherit;
+        height: $bar-height;
         background: --var($theme, 'track-color');
+        overflow: hidden;
         z-index: 0;
     }
 
-    %linear-bar-progress {
+    %linear-indicator {
         width: 100%;
         position: relative;
         height: inherit;
-        backface-visibility: hidden;
     }
 
-    %linear-bar-progress--striped {
+    %linear-indicator--striped {
         background-image: linear-gradient(
             -45deg,
             $stripe-color 25%,
@@ -116,23 +109,39 @@
         background-size: 40px 40px;
     }
 
-    %linear-bar-progress--default {
+    %linear-indicator--indeterminate {
+        @include animation(indeterminate-bar 2s cubic-bezier(0, .085, .68, .53) infinite);
+        width: 100% !important;
+
+        &::before {
+            position: absolute;
+            content: '';
+            top: 0;
+            left: -200%;
+            width: 100%;
+            height: inherit;
+            background-color: inherit;
+            transform-origin: top right;
+        }
+    }
+
+    %linear-indicator--default {
         background: --var($theme, 'fill-color-default')
     }
 
-    %linear-bar-progress--danger {
+    %linear-indicator--danger {
         background-color: --var($theme, 'fill-color-danger');
     }
 
-    %linear-bar-progress--warning {
+    %linear-indicator--warning {
         background-color: --var($theme, 'fill-color-warning');
     }
 
-    %linear-bar-progress--info {
+    %linear-indicator--info {
         background-color: --var($theme, 'fill-color-info');
     }
 
-    %linear-bar-progress--success {
+    %linear-indicator--success {
         background-color: --var($theme, 'fill-color-success');
     }
 
@@ -191,7 +200,7 @@
     $progress-circle-color: null,
     $text-color: null
 ) {
-    $name: 'igx-progress-circular';
+    $name: 'igx-circular-bar';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
     @return extend($theme, (
@@ -202,12 +211,15 @@
         text-color: $text-color
     ));
 }
-
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} igx-root-css-vars
 /// @requires rem
+/// @requires {mixin} rotate-center
 /// @requires --var
 @mixin igx-progress-circular($theme) {
+    // Include rotate animation
+    @include rotate-center();
+
     @include igx-root-css-vars($theme);
 
     // @debug $theme;
@@ -216,27 +228,44 @@
     $circular-value-fw: 600;
 
     %circular-display {
-        width: 100%;
-        height: 100%;
+        display: inline-flex;
+        flex: 1 1 auto;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            min-width: 24px;
+            min-height: 24px;
+        }
+    }
+
+    %circular-display--indeterminate {
+        @include animation(rotate-center 1.4s linear infinite);
+        transform-origin: 50% 50%;
     }
 
-    %circular-innercircle {
+    %circular-inner {
         stroke-width: 4;
         fill: transparent;
         stroke: --var($theme, 'base-circle-color');
     }
 
-    %circular-circle {
+    %circular-outer {
         fill: transparent;
         stroke: --var($theme, 'progress-circle-color');
-        stroke-width: 6;
-        stroke-linecap: round;
+        stroke-width: 4;
         stroke-dashoffset: 289;
         stroke-dasharray: 289;
         transform-origin: 50% 50%;
         transform: rotate(-90deg);
     }
 
+    %circular-outer--indeterminate {
+        stroke-dashoffset: 180;
+        stroke-dasharray: 180;
+        @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) infinite);
+    }
+
     %circular-text {
         font-size: $circular-value-fs;
         font-weight: $circular-value-fw;
@@ -247,3 +276,31 @@
         visibility: hidden;
     }
 }
+
+@include keyframes('indeterminate-bar') {
+    0% {
+        transform: scaleX(0) translateX(-100%);
+        transform-origin: left;
+    }
+
+    50% {
+        transform: scaleX(1) translateX(50%);
+        transform-origin: right;
+    }
+
+    100% {
+        transform: scaleX(0) translateX(200%);
+        transform-origin: right;
+    }
+}
+
+@include keyframes('indeterminate-accordion') {
+    50% {
+        stroke-dashoffset: 260;
+        stroke-dasharray: 289;
+    }
+
+    100% {
+        stroke-dashoffset: -180;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
index f7b2e4bdf3a..b86c91c73a1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -113,8 +113,8 @@ $dark-schema: (
     igx-navbar: $_dark-navbar,
     igx-navdrawer: $_dark-navdrawer,
     igx-overlay: $_dark-overlay,
-    igx-progress-linear: $_dark-progress-linear,
-    igx-progress-circular: $_dark-progress-circular,
+    igx-linear-bar: $_dark-progress-linear,
+    igx-circular-bar: $_dark-progress-circular,
     igx-radio: $_dark-radio,
     igx-ripple: $_dark-ripple,
     igx-slider: $_dark-slider,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
index a6a17eff30d..eb49679135c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -114,8 +114,8 @@ $light-schema: (
     igx-navbar: $_light-navbar,
     igx-navdrawer: $_light-navdrawer,
     igx-overlay: $_light-overlay,
-    igx-progress-linear: $_light-progress-linear,
-    igx-progress-circular: $_light-progress-circular,
+    igx-linear-bar: $_light-progress-linear,
+    igx-circular-bar: $_light-progress-circular,
     igx-radio: $_light-radio,
     igx-ripple: $_light-ripple,
     igx-slider: $_light-slider,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss
index 94deb7defdf..86a8faf8d2b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss
@@ -19,8 +19,6 @@
 /// @see $default-palette
 
 $_light-progress-linear: (
-    name: 'igx-progress-linear',
-
     track-color: (
         igx-color: ('grays', 300)
     ),
@@ -62,8 +60,6 @@ $_light-progress-linear: (
 /// @see $default-palette
 
 $_light-progress-circular: (
-    name: 'igx-progress-circular',
-
     base-circle-color: (
         igx-color: ('grays', 300)
     ),
diff --git a/projects/igniteui-angular/src/lib/progressbar/README.md b/projects/igniteui-angular/src/lib/progressbar/README.md
index ff4ba52ae08..5b4f153d056 100644
--- a/projects/igniteui-angular/src/lib/progressbar/README.md
+++ b/projects/igniteui-angular/src/lib/progressbar/README.md
@@ -43,6 +43,7 @@ export class AppModule {}
 | `textVisibility` | boolean | Set the text to be visible. By default is set to `true`. |
 | `textTop` | boolean | Set the position that defene is text to be aligned above the progress line. By default is set to `false`. |
 | `text` | string | Set a custom text that is displayed according defined position. |
+| `indeterminate` | boolean | Display the indicator continually growing and shrinking along the track. |
 ## igx-circular-bar
 | Name   |       Type      |  Description |
 |:----------|:-------------:|:------|
@@ -51,6 +52,7 @@ export class AppModule {}
 | `value` |  number | Set value that indicates the completed bar position. |
 | `animate` |  boolean | animation on progress bar. |
 | `textVisibility` | boolean | Set the text to be visible. By default is set to `true`. |
+| `indeterminate` | boolean | Display the indicator continually growing and shrinking along the track. |
 ## Common
 | Name   |  Description |
 |:----------|:------|
diff --git a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
index 79cbcb08f94..ca6bd20a09f 100644
--- a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
@@ -12,6 +12,12 @@ import { Common } from './common.spec';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
+const CIRCULAR_INNER_CLASS = 'igx-circular-bar__inner';
+const CIRCULAR_OUTER_CLASS = 'igx-circular-bar__outer';
+const CIRCULAR_TEXT_CLASS = 'igx-circular-bar__text';
+const CIRCULAR_HIDDEN_TEXT_CLASS = 'igx-circular-bar__text--hidden';
+const CIRCULAR_INDETERMINATE_CLASS = 'igx-circular-bar--indeterminate';
+
 describe('IgCircularBar', () => {
     configureTestSuite();
     const tickTime = 2000;
@@ -26,7 +32,7 @@ describe('IgCircularBar', () => {
                 IgxProgressBarModule
             ]
         })
-        .compileComponents();
+            .compileComponents();
     }));
 
     it('Initialize circularProgressbar with default values', () => {
@@ -35,12 +41,9 @@ describe('IgCircularBar', () => {
         fixture.detectChanges();
 
         const progress = fixture.componentInstance.circularBar;
-        const domProgress = fixture.debugElement.query(By.css('igx-circular-bar')).nativeElement;
-        const value = 0;
         const defaultMaxValue = 100;
 
         expect(progress.id).toContain('igx-circular-bar-');
-        expect(domProgress.id).toContain('igx-circular-bar-');
         expect(progress.max).toBe(defaultMaxValue);
         expect(progress.value).toBe(0);
     });
@@ -277,7 +280,7 @@ describe('IgCircularBar', () => {
     });
 
     it(`when step value is not divisble to passed value the result returned from the
-    value getter should be as same as the passed one`, fakeAsync(() => {
+    value getter should be the same as the passed one`, fakeAsync(() => {
         const fix = TestBed.createComponent(InitCircularProgressBarComponent);
         fix.detectChanges();
 
@@ -308,20 +311,40 @@ describe('IgCircularBar', () => {
         fixture.detectChanges();
 
         const componentInstance = fixture.componentInstance;
-        const progressBarElem = fixture.debugElement.nativeElement
-            .querySelector('.progress-circular');
+        const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
+
         fixture.detectChanges();
         expect(progressBarElem.attributes['aria-valuenow'].textContent).toBe('20');
 
-        expect(progressBarElem.children[0].classList.value).toBe('progress-circular__innercircle');
-        expect(progressBarElem.children[1].classList.value).toBe('progress-circular__circle');
+        expect(progressBarElem.children[0].classList.value).toBe(CIRCULAR_INNER_CLASS);
+        expect(progressBarElem.children[1].classList.value).toBe(CIRCULAR_OUTER_CLASS);
         expect(progressBarElem.children[2].children.length).toBe(2);
         expect(progressBarElem.children[2].children[0].textContent.trim()).toBe('Value is:');
         expect(progressBarElem.children[2].children[1].textContent.trim()).toMatch('20');
 
         componentInstance.progressbar.textVisibility = false;
         fixture.detectChanges();
-        expect(progressBarElem.children[2].classList.value).toMatch('progress-circular__text--hidden');
+        expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+    });
+
+    it('When indeterminate mode is on value should not be updated', () => {
+        const fix = TestBed.createComponent(InitCircularProgressBarComponent);
+        fix.detectChanges();
+
+        const progressbar = fix.componentInstance.circularBar;
+        expect(progressbar.value).toEqual(0);
+
+        progressbar.indeterminate = true;
+        progressbar.value = 20;
+        fix.detectChanges();
+
+        expect(progressbar.value).toEqual(0);
+
+        progressbar.animate = false;
+        progressbar.value = 30;
+        fix.detectChanges();
+
+        expect(progressbar.value).toEqual(0);
     });
 
     // UI TESTS
@@ -332,8 +355,7 @@ describe('IgCircularBar', () => {
             fixture.detectChanges();
 
             const componentInstance = fixture.componentInstance;
-            const progressBarElem = fixture.debugElement.nativeElement
-                .querySelector('.progress-circular');
+            const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
             let expectedTextContent = componentInstance.circularBar.value + '%';
 
             tick(tickTime);
@@ -342,9 +364,9 @@ describe('IgCircularBar', () => {
             expect(progressBarElem.attributes['aria-valuenow'].textContent).toBe(componentInstance.value.toString());
             expect(progressBarElem.attributes['aria-valuemax'].textContent).toBe(componentInstance.max.toString());
 
-            expect(progressBarElem.children[0].classList.value).toBe('progress-circular__innercircle');
-            expect(progressBarElem.children[1].classList.value).toBe('progress-circular__circle');
-            expect(progressBarElem.children[2].children[0].classList.value).toBe('progress-circular__text');
+            expect(progressBarElem.children[0].classList.value).toBe(CIRCULAR_INNER_CLASS);
+            expect(progressBarElem.children[1].classList.value).toBe(CIRCULAR_OUTER_CLASS);
+            expect(progressBarElem.children[2].children[0].classList.value).toBe(CIRCULAR_TEXT_CLASS);
             expect(progressBarElem.children[2].children[0].textContent.trim()).toMatch(expectedTextContent);
 
             componentInstance.circularBar.text = 'No progress';
@@ -356,7 +378,7 @@ describe('IgCircularBar', () => {
             componentInstance.circularBar.textVisibility = false;
             fixture.detectChanges();
 
-            expect(progressBarElem.children[2].classList.value).toMatch('progress-circular__text--hidden');
+            expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
         }));
 
         it('The max representation should respond correctly to passed maximum value', fakeAsync(() => {
@@ -364,8 +386,7 @@ describe('IgCircularBar', () => {
             fixture.detectChanges();
 
             const componentInstance = fixture.componentInstance;
-            const progressBarElem = fixture.debugElement.nativeElement
-                .querySelector('.progress-circular');
+            const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
 
             tick(tickTime);
             fixture.detectChanges();
@@ -378,9 +399,6 @@ describe('IgCircularBar', () => {
             fixture.detectChanges();
 
             expect(progressBarElem.attributes['aria-valuemax'].textContent).toBe(componentInstance.max.toString());
-            expect(progressBarElem.children[0].classList.value).toBe('progress-circular__innercircle');
-            expect(progressBarElem.children[1].classList.value).toBe('progress-circular__circle');
-            expect(progressBarElem.children[2].children[0].classList.value).toBe('progress-circular__text');
         }));
 
         it('Manipulate progressbar with floating point numbers', fakeAsync(() => {
@@ -397,8 +415,8 @@ describe('IgCircularBar', () => {
             fix.detectChanges();
 
             const progressRepresentation = Common.calcPercentage(val, maxVal);
-            const progressBarElem = fix.debugElement.query(By.css('.progress-circular'));
-            const valueInPercent = progressBarElem.query(By.css('.progress-circular__text')).nativeElement;
+            const progressBarElem = fix.debugElement.query(By.css('svg'));
+            const valueInPercent = progressBarElem.query(By.css(`.${CIRCULAR_TEXT_CLASS}`)).nativeElement;
             expect(valueInPercent.textContent.trim()).toBe(`${progressRepresentation}%`);
         }));
 
@@ -411,15 +429,29 @@ describe('IgCircularBar', () => {
             const value = 2.55;
             bar.step = 0.634;
             bar.max = maxVal;
-            bar.value  = value;
+            bar.value = value;
 
             tick(tickTime + tickTime); // enough time to exceed the progress update.
             fix.detectChanges();
 
-            const progressBarContainer = fix.debugElement.query(By.css('.progress-circular')).nativeElement;
+            const progressBarContainer = fix.debugElement.query(By.css('svg')).nativeElement;
             expect(parseFloat(progressBarContainer.attributes['aria-valuenow'].textContent)).toBe(value);
             expect(bar.value).toBe(value);
         }));
+
+        it('When enable indeterminate mode, then the appropriate class should be applied.', () => {
+            const fix = TestBed.createComponent(InitCircularProgressBarComponent);
+            fix.detectChanges();
+
+            const bar = fix.debugElement.nativeElement.querySelector('igx-circular-bar');
+            expect(bar.classList.contains(CIRCULAR_INDETERMINATE_CLASS)).toEqual(false);
+
+            const barComponent = fix.componentInstance.circularBar;
+            barComponent.indeterminate = true;
+            fix.detectChanges();
+
+            expect(bar.classList.contains(CIRCULAR_INDETERMINATE_CLASS)).toEqual(true);
+        });
     });
 });
 @Component({ template: `<igx-circular-bar></igx-circular-bar>` })
diff --git a/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts b/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts
index 83d2e1e8527..26a36eacc35 100644
--- a/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts
@@ -11,6 +11,14 @@ import { Common } from './common.spec';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
+const SUCCESS_TYPE_CLASS = 'igx-linear-bar--success';
+const INFO_TYPE_CLASS = 'igx-linear-bar--info';
+const WARNING_TYPE_CLASS = 'igx-linear-bar--warning';
+const DANGER_TYPE_CLASS = 'igx-linear-bar--danger';
+const STRIPED_CLASS = 'igx-linear-bar--striped';
+const LINEAR_BAR_TAG = 'igx-linear-bar';
+const INDETERMINATE_CLASS = 'igx-linear-bar--indeterminate';
+
 describe('IgLinearBar', () => {
     configureTestSuite();
     const tickTime = 2000;
@@ -30,7 +38,7 @@ describe('IgLinearBar', () => {
         fixture.detectChanges();
 
         const progress = fixture.componentInstance.linearBar;
-        const domProgress = fixture.debugElement.query(By.css('igx-linear-bar')).nativeElement;
+        const domProgress = fixture.debugElement.query(By.css(LINEAR_BAR_TAG)).nativeElement;
         const defaultMaxValue = 100;
         const defaultValue = 0;
         const defaultStriped = false;
@@ -144,7 +152,7 @@ describe('IgLinearBar', () => {
     it('Should update value when we try to decrese it', fakeAsync(() => {
         const fixture = TestBed.createComponent(LinearBarComponent);
         fixture.detectChanges();
-        const progressBar = fixture.componentInstance.linearBar;
+        const progressBar = fixture.componentInstance.progressbar;
         let expectedValue = 50;
 
         fixture.componentInstance.value = expectedValue;
@@ -167,7 +175,7 @@ describe('IgLinearBar', () => {
 
     it('Should update value when we try to decrease it (without animation)', () => {
         const fixture = TestBed.createComponent(LinearBarComponent);
-        const progressBar = fixture.componentInstance.linearBar;
+        const progressBar = fixture.componentInstance.progressbar;
         let expectedValue = 50;
 
         fixture.componentInstance.animate = false;
@@ -187,24 +195,24 @@ describe('IgLinearBar', () => {
         const fix = TestBed.createComponent(LinearBarComponent);
         fix.detectChanges();
 
-        const datepicker = fix.componentInstance.linearBar;
+        const progressbar = fix.componentInstance.linearBar;
         const expectedRes = fix.componentInstance.value;
 
         tick(tickTime);
         fix.detectChanges();
-        expect(datepicker.value).toEqual(expectedRes);
+        expect(progressbar.value).toEqual(expectedRes);
 
-        datepicker.value = '0345-234';
+        progressbar.value = '0345-234';
         tick(tickTime);
         fix.detectChanges();
-        expect(datepicker.value).toEqual(expectedRes);
+        expect(progressbar.value).toEqual(expectedRes);
     }));
 
     it('The update step is 1% of the maximum value, which prevents from slow update with big nums', () => {
         const fix = TestBed.createComponent(LinearBarComponent);
         fix.detectChanges();
 
-        const bar = fix.componentInstance.linearBar;
+        const bar = fix.componentInstance.progressbar;
         const ONE_PERCENT = 0.01;
         let expectedValue = bar.max * ONE_PERCENT;
         expect(bar.step).toBe(expectedValue);
@@ -225,7 +233,7 @@ describe('IgLinearBar', () => {
         fix.detectChanges();
 
         tick(tickTime);
-        const bar = compInstance.linearBar;
+        const bar = compInstance.progressbar;
         const expectedRes = 0;
         expect(bar.value).toBe(expectedRes);
         expect(bar.valueInPercent).toBe(expectedRes);
@@ -248,7 +256,7 @@ describe('IgLinearBar', () => {
         compInstance.value = value;
         fix.detectChanges();
 
-        const bar = compInstance.linearBar;
+        const bar = compInstance.progressbar;
         tick(tickTime);
         expect(bar.value).toBe(max);
         expect(bar.valueInPercent).toBe(100);
@@ -325,6 +333,26 @@ describe('IgLinearBar', () => {
             expect(bar.valueInPercent).toBe(valueInPercent);
     }));
 
+    it('When indeterminate mode is on value should not be updated', () => {
+        const fix = TestBed.createComponent(InitLinearProgressBarComponent);
+        fix.detectChanges();
+
+        const progressbar = fix.componentInstance.linearBar;
+        expect(progressbar.value).toEqual(0);
+
+        progressbar.indeterminate = true;
+        progressbar.value = 30;
+        fix.detectChanges();
+
+        expect(progressbar.value).toEqual(0);
+
+        progressbar.animate = false;
+        progressbar.value = 20;
+        fix.detectChanges();
+
+        expect(progressbar.value).toEqual(0);
+    });
+
     // UI Tests
     describe('UI tests linear bar', () => {
         configureTestSuite();
@@ -333,70 +361,62 @@ describe('IgLinearBar', () => {
             fixture.detectChanges();
 
             const componentInstance = fixture.componentInstance;
-            const progressBarContainer =
-                fixture.debugElement.nativeElement.querySelector('.progress-linear__bar');
-            const progressBarElem = progressBarContainer.querySelector('[class*=\'progress-linear__bar-progress\']');
+            const linearBar = fixture.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
+            const progressIndicator = linearBar.querySelector('.igx-linear-bar__indicator');
 
             tick(tickTime);
             fixture.detectChanges();
 
-            expect(progressBarElem.style.width).toBe(componentInstance.value + '%');
-            expect(progressBarContainer.attributes['aria-valuenow'].textContent).toBe(componentInstance.value.toString());
+            expect(progressIndicator.style.width).toBe(componentInstance.value + '%');
+            expect(linearBar.attributes['aria-valuenow'].textContent).toBe(componentInstance.value.toString());
         }));
 
         it('Should change class suffix which would be relevant to the type that has been passed', () => {
             const fixture = TestBed.createComponent(LinearBarComponent);
             fixture.detectChanges();
 
-            const progressBarContainer =
-                fixture.debugElement.nativeElement.querySelector('.progress-linear__bar');
-            const progressBarElem = progressBarContainer.querySelector('[class*=\'progress-linear__bar-progress\']');
+            const linearBar =
+                fixture.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
 
-            expect(progressBarElem.classList.contains('progress-linear__bar-progress--default')).toBe(true);
+            expect(linearBar.classList.length).toEqual(1);
+            expect(linearBar.classList.contains(LINEAR_BAR_TAG)).toEqual(true);
 
             fixture.componentInstance.type = 'info';
             fixture.detectChanges();
 
-            expect(progressBarElem.classList.contains('progress-linear__bar-progress--info')).toBe(true);
+            expect(linearBar.classList.contains(INFO_TYPE_CLASS)).toEqual(true);
         });
 
         it('Change progressbar style to be striped', () => {
             const fixture = TestBed.createComponent(LinearBarComponent);
             fixture.detectChanges();
 
-            const progressElem = fixture.debugElement.nativeElement
-                .getElementsByClassName('progress-linear')[0];
+            const linerBar = fixture.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
 
-            expect(progressElem.classList.contains('progress-linear--striped')).toBe(false);
+            expect(linerBar.classList.contains(STRIPED_CLASS)).toEqual(false);
 
             fixture.componentInstance.striped = true;
             fixture.detectChanges();
 
-            expect(progressElem.classList.contains('progress-linear--striped')).toBe(true);
+            expect(linerBar.classList.contains(STRIPED_CLASS)).toEqual(true);
         });
 
         it('should stay striped when the type has changed', () => {
             const fixture = TestBed.createComponent(LinearBarComponent);
             fixture.detectChanges();
 
-            const progressElem = fixture.debugElement.nativeElement
-                .getElementsByClassName('progress-linear')[0];
-
-            const progressBarContainer =
-                fixture.debugElement.nativeElement.querySelector('.progress-linear__bar');
-            const progressBarElem = progressBarContainer.querySelector('[class*=\'progress-linear__bar-progress\']');
+            const linearBar = fixture.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
 
             fixture.componentInstance.striped = true;
             fixture.detectChanges();
 
-            expect(progressBarElem.classList.contains('progress-linear__bar-progress--default')).toBe(true);
-            expect(progressElem.classList.contains('progress-linear--striped')).toBe(true);
+            expect(linearBar.classList.contains(STRIPED_CLASS)).toEqual(true);
 
             fixture.componentInstance.type = 'success';
             fixture.detectChanges();
 
-            expect(progressBarElem.classList.contains('progress-linear__bar-progress--success')).toBe(true);
-            expect(progressElem.classList.contains('progress-linear--striped')).toBe(true);
+            expect(linearBar.classList.contains(SUCCESS_TYPE_CLASS)).toEqual(true);
+            expect(linearBar.classList.contains(STRIPED_CLASS)).toEqual(true);
         });
 
         it('Manipulate progressbar with floating point numbers', fakeAsync(() => {
@@ -413,8 +433,9 @@ describe('IgLinearBar', () => {
             fix.detectChanges();
 
             const progressRepresentation = Common.calcPercentage(val, maxVal);
-            const getProgressIndicator = fix.debugElement.query(By.css(`[class*='progress-linear__bar-progress']`));
-            expect(getProgressIndicator.styles.width).toBe(`${progressRepresentation}%`);
+            const progressbar = fix.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
+            const progressIndicator = progressbar.querySelector('.igx-linear-bar__indicator');
+            expect(progressIndicator.style.width).toBe(`${progressRepresentation}%`);
         }));
 
         it('Prevent constant update of progress value when value and max value differ', fakeAsync(() => {
@@ -431,10 +452,23 @@ describe('IgLinearBar', () => {
             tick(tickTime + tickTime); // enough time to exceed the progress update.
             fix.detectChanges();
 
-            const progressBarContainer = fix.debugElement.query(By.css('.progress-linear__bar')).nativeElement;
+            const progressBarContainer = fix.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
             expect(parseFloat(progressBarContainer.attributes['aria-valuenow'].textContent)).toBe(value);
             expect(bar.value).toBe(value);
         }));
+
+        it('When enable indeterminate mode, then the appropriate class should be applied.', () => {
+            const fix = TestBed.createComponent(LinearBarComponent);
+            fix.detectChanges();
+
+            const bar = fix.debugElement.nativeElement.querySelector(LINEAR_BAR_TAG);
+            expect(bar.classList.contains(INDETERMINATE_CLASS)).toEqual(false);
+
+            fix.componentInstance.progressbar.indeterminate = true;
+
+            fix.detectChanges();
+            expect(bar.classList.contains(INDETERMINATE_CLASS)).toEqual(true);
+        });
     });
 });
 
@@ -451,7 +485,6 @@ class InitLinearProgressBarComponent {
                         </div>` })
 class LinearBarComponent {
     @ViewChild(IgxLinearProgressBarComponent) public progressbar: IgxLinearProgressBarComponent;
-    @ViewChild('wrapper') public wrapper;
     @ViewChild('linearBar') public linearBar;
 
     public value: string | number = 30;
diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts
index 11d324420fa..bc02e2f8137 100644
--- a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts
+++ b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts
@@ -1,17 +1,14 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit,
     Component,
     ElementRef,
     EventEmitter,
     HostBinding,
     Input,
     NgModule,
-    OnChanges,
     Output,
     Renderer2,
     ViewChild,
-    TemplateRef,
     ContentChild
 } from '@angular/core';
 import { IgxProcessBarTextTemplateDirective } from './progressbar.common';
@@ -25,6 +22,13 @@ export enum IgxTextAlign {
     END = 'end'
 }
 
+export enum IgxProgressType {
+    DANGER = 'danger',
+    INFO = 'info',
+    WARNING = 'warning',
+    SUCCESS = 'success'
+}
+
 export interface IChangeProgressEventArgs {
     previousValue: number;
     currentValue: number;
@@ -110,8 +114,8 @@ export abstract class BaseProgress {
             this.updateProgress(val);
             cancelAnimationFrame(this.requestAnimationId);
         } else if (this.isInLimitRange(progressValue, passedValue, step)) {
-                this.updateProgress(val);
-                cancelAnimationFrame(this.requestAnimationId);
+            this.updateProgress(val);
+            cancelAnimationFrame(this.requestAnimationId);
         } else {
             this.valueInPercent = progressValue;
             this.requestAnimationId = requestAnimationFrame(() => this.updateProgressSmoothly.call(this, val, step));
@@ -184,77 +188,6 @@ let NEXT_CIRCULAR_ID = 0;
 })
 export class IgxLinearProgressBarComponent extends BaseProgress {
 
-    /**An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
-     * ```html
-     *<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
-     * ```
-     */
-    @HostBinding('attr.id')
-    @Input()
-    public id = `igx-linear-bar-${NEXT_LINEAR_ID++}`;
-
-    /**
-     *Set the position that defines where the text is aligned.
-     Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`.
-     *```typescript
-     *public positionCenter: IgxTextAlign;
-     *public ngOnInit() {
-     *    this.positionCenter = IgxTextAlign.CENTER;
-     *}
-     * //...
-     *```
-     * ```html
-     *<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public textAlign: IgxTextAlign = IgxTextAlign.START;
-
-    /**
-     *Set the text to be visible. By default it is set to true.
-     * ```html
-     *<igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public textVisibility = true;
-
-    /**
-     *Set the position that defines if the text should be aligned above the progress line. By default is set to false.
-     *```html
-     *<igx-linear-bar type="danger" [textTop]="true"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public textTop = false;
-
-    /**
-     *Set a custom text that is displayed according to the defined position.
-     * ```html
-     *<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public text: string;
-
-    /**
-     *Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false.
-     *```html
-     *<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public striped = false;
-
-    /**
-     *Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `danger`.
-     *```html
-     *<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="danger"></igx-linear-bar>
-     *```
-     */
-    @Input()
-    public type = 'default';
-
     /**
      *Animation on progress `IgxLinearProgressBarComponent`. By default it is set to true.
      *```html
@@ -287,6 +220,7 @@ export class IgxLinearProgressBarComponent extends BaseProgress {
      *<igx-linear-bar [striped]="false" [max]="200" [value]="0"></igx-linear-bar>
      *```
      */
+    @HostBinding('attr.aria-valuemax')
     @Input()
     set max(maxNum: number) {
         this._max = maxNum;
@@ -337,7 +271,109 @@ export class IgxLinearProgressBarComponent extends BaseProgress {
         this._step = Number(val);
     }
 
+    constructor() {
+        super();
+    }
+
+    @HostBinding('attr.aria-valuemin')
+    public valueMin = 0;
+
+    @HostBinding('class.igx-linear-bar')
+    public cssClass = 'igx-linear-bar';
+
+    /**
+     *Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false.
+     *```html
+     *<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
+     *```
+     */
+    @HostBinding('class.igx-linear-bar--striped')
+    @Input()
+    public striped = false;
+
+    /**
+     *Set `IgxLinearProgressBarComponent` to have indeterminate. By default it is set to false.
+     *```html
+     *<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
+     *```
+     */
+    @HostBinding('class.igx-linear-bar--indeterminate')
+    @Input()
+    public indeterminate = false;
+
+    /**An @Input property that sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`.
+     * ```html
+     *<igx-linear-bar role="progressbar"></igx-linear-bar>
+     * ```
+     */
+    @HostBinding('attr.role')
+    @Input()
+    public role = 'progressbar';
+
+    /**An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
+     * ```html
+     *<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
+     * ```
+     */
+    @HostBinding('attr.id')
+    @Input()
+    public id = `igx-linear-bar-${NEXT_LINEAR_ID++}`;
+
+    /**
+     *Set the position that defines where the text is aligned.
+     Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`.
+     *```typescript
+     *public positionCenter: IgxTextAlign;
+     *public ngOnInit() {
+     *    this.positionCenter = IgxTextAlign.CENTER;
+     *}
+     * //...
+     *```
+     * ```html
+     *<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
+     *```
+     */
+    @Input()
+    public textAlign: IgxTextAlign = IgxTextAlign.START;
+
+    /**
+     *Set the text to be visible. By default it is set to true.
+     * ```html
+     *<igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
+     *```
+     */
+    @Input()
+    public textVisibility = true;
+
     /**
+     *Set the position that defines if the text should be aligned above the progress line. By default is set to false.
+     *```html
+     *<igx-linear-bar type="danger" [textTop]="true"></igx-linear-bar>
+     *```
+     */
+    @Input()
+    public textTop = false;
+
+    /**
+     *Set a custom text that is displayed according to the defined position.
+     * ```html
+     *<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
+     *```
+     */
+    @Input()
+    public text: string;
+
+    /**
+     *Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `danger`.
+     *```html
+     *<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="danger"></igx-linear-bar>
+     *```
+     */
+
+    @Input()
+    public type = 'default';
+
+     /**
      *Returns value that indicates the current `IgxLinearProgressBarComponent` position.
      *```typescript
      *@ViewChild("MyProgressBar")
@@ -348,6 +384,7 @@ export class IgxLinearProgressBarComponent extends BaseProgress {
      *}
      *```
      */
+    @HostBinding('attr.aria-valuenow')
     @Input()
     get value(): number {
         return this._value;
@@ -361,7 +398,7 @@ export class IgxLinearProgressBarComponent extends BaseProgress {
      */
     set value(val) {
         val = Number(val);
-        if (this._value === val) {
+        if (this._value === val || this.indeterminate) {
             return;
         }
 
@@ -398,8 +435,36 @@ export class IgxLinearProgressBarComponent extends BaseProgress {
      */
     @Output() public onProgressChanged = new EventEmitter<IChangeProgressEventArgs>();
 
-    constructor() {
-        super();
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-linear-bar--danger')
+    public get danger() {
+        return this.type === IgxProgressType.DANGER;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-linear-bar--info')
+    public get info() {
+        return this.type === IgxProgressType.INFO;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-linear-bar--warning')
+    public get warning() {
+        return this.type === IgxProgressType.WARNING;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-linear-bar--success')
+    public get success() {
+        return this.type === IgxProgressType.SUCCESS;
     }
 }
 
@@ -412,6 +477,10 @@ export class IgxCircularProgressBarComponent extends BaseProgress {
     private readonly STROKE_OPACITY_DVIDER = 100;
     private readonly STROKE_OPACITY_ADDITION = .2;
 
+    /** @hidden */
+    @HostBinding('class.igx-circular-bar')
+    public cssClass = 'igx-circular-bar';
+
     /**
      *An event, which is triggered after a progress is changed.
      *```typescript
@@ -437,6 +506,16 @@ export class IgxCircularProgressBarComponent extends BaseProgress {
     @Input()
     public id = `igx-circular-bar-${NEXT_CIRCULAR_ID++}`;
 
+    /**
+     *An @Input property that sets the value of the `indeterminate` attribute. If not provided it will be automatically set to false.
+     *```html
+     *<igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+     *```
+     */
+    @HostBinding('class.igx-circular-bar--indeterminate')
+    @Input()
+    public indeterminate = false;
+
     /**
      *Sets the text visibility. By default it is set to true.
      *```html
@@ -466,7 +545,7 @@ export class IgxCircularProgressBarComponent extends BaseProgress {
     */
     public get context(): any {
         return {
-            $implicit: { value: this.value, valueInPercent: this.valueInPercent, max: this.max}
+            $implicit: { value: this.value, valueInPercent: this.valueInPercent, max: this.max }
         };
     }
 
@@ -582,7 +661,7 @@ export class IgxCircularProgressBarComponent extends BaseProgress {
      */
     set value(val: number) {
         val = Number(val);
-        if (this._value === val) {
+        if (this._value === val || this.indeterminate) {
             return;
         }
 
diff --git a/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html
index 537895cb1c6..ae9b8f5208d 100644
--- a/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html
+++ b/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html
@@ -1,13 +1,19 @@
-<svg #svg class="progress-circular" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-    viewBox="0 0 100 100" preserveAspectRatio="none" role="progressbar" aria-valuemin="0" [attr.aria-valuemax]="max" [attr.aria-valuenow]="value">
-    <circle class="progress-circular__innercircle" cx="50" cy="50" r="46" />
-    <circle #circle class="progress-circular__circle" cx="50" cy="50" r="46" />
-    <text #text [class.progress-circular__text--hidden]="!textVisibility" id="myTimer" text-anchor="middle" x="50" y="60">
+<svg #svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid meet"
+    role="progressbar"
+    aria-valuemin="0"
+    [attr.aria-valuemax]="max"
+    [attr.aria-valuenow]="value"
+>
+    <circle class="igx-circular-bar__inner" cx="50" cy="50" r="46" />
+    <circle #circle class="igx-circular-bar__outer" cx="50" cy="50" r="46" />
+    <text #text [class.igx-circular-bar__text--hidden]="!textVisibility" id="myTimer" text-anchor="middle" x="50" y="60">
             <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate; context: context">
             </ng-container>
     </text>
 
     <ng-template #defaultTextTemplate>
-        <tspan class="progress-circular__text"> {{textContent ? textContent: valueInPercent + '%'}}</tspan>
+        <tspan class="igx-circular-bar__text"> {{textContent ? textContent: valueInPercent + '%'}}</tspan>
     </ng-template>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html
index 8409ef2b14c..b3b2b1eb8d3 100644
--- a/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html
+++ b/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html
@@ -1,12 +1,15 @@
-<div class="progress-linear" [class.progress-linear--striped]="striped">
-    <div class="progress-linear__bar" #linearBar role="progressbar" aria-valuemin="0" [attr.aria-valuemax]="max" [attr.aria-valuenow]="value">
-        <div class="progress-linear__bar-base"></div>
-        <div class="progress-linear__bar-progress{{type ? '--' + type : ''}}" [style.width.%]="valueInPercent"></div>
-    </div>
-    <span 
-        class="progress-linear__value{{textAlign ? '--' + textAlign : ''}}"
-        [class.progress-linear__value--top]="textTop"
-        [class.progress-linear__value--hidden]="!textVisibility">
-            {{text ? text : valueInPercent + '%'}}
-    </span>
+<div class="igx-linear-bar__base">
+    <div class="igx-linear-bar__indicator"
+    [style.width.%]="valueInPercent"></div>
 </div>
+
+<span
+    class="igx-linear-bar__value"
+    [ngClass]="{
+        'igx-linear-bar__value--start': textAlign === 'start',
+        'igx-linear-bar__value--end': textAlign === 'end',
+        'igx-linear-bar__value--top': textTop,
+        'igx-linear-bar__value--hidden': !textVisibility
+    }">
+        {{text ? text : valueInPercent + '%'}}
+</span>
diff --git a/src/app/progressbar/progressbar.sample.css b/src/app/progressbar/progressbar.sample.css
index 73d5c7c6359..158fc149e17 100644
--- a/src/app/progressbar/progressbar.sample.css
+++ b/src/app/progressbar/progressbar.sample.css
@@ -5,15 +5,17 @@
 
 .circular-container {
     display: flex;
-    width: 84px;
-    height: 84px;
-    padding: 16px;
+    margin: 16px;
 }
 
-.linear-container + .linear-container{
-    padding-top: 16px;
+.circular-sample {
+    width: 54px;
+    height: 54px;
 }
 
+.linear-container+.linear-container {
+    padding-top: 16px;
+}
 
 .button-container {
     position: fixed;
diff --git a/src/app/progressbar/progressbar.sample.html b/src/app/progressbar/progressbar.sample.html
index 5b9c49d566c..290cf992cb0 100644
--- a/src/app/progressbar/progressbar.sample.html
+++ b/src/app/progressbar/progressbar.sample.html
@@ -6,7 +6,7 @@
         <article class="linear-samples sample-column">
             <h4 class="sample-title">Linear progress bar</h4>
             <div class="linear-container">
-                <igx-linear-bar [striped]="false" [value]="currentValue" [max]="200">
+                <igx-linear-bar [striped]="false" [value]="currentValue" max="100">
                 </igx-linear-bar>
             </div>
 
@@ -29,6 +29,11 @@ <h4 class="sample-title">Linear progress bar</h4>
                 <igx-linear-bar type="info" [striped]="false" [value]="currentValue">
                 </igx-linear-bar>
             </div>
+
+            <div class="linear-container">
+                <igx-linear-bar [indeterminate]="true">
+                </igx-linear-bar>
+            </div>
         </article>
 
         <article class="linear-samples sample-column">
@@ -63,29 +68,32 @@ <h4 class="sample-title">Striped linear progress bar</h4>
             <h4 class="sample-title">Circular progress indicator</h4>
             <div class="circular-samples">
                 <div class="circular-container">
-                    <igx-circular-bar [value]="currentValue"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="currentValue" [indeterminate]="true"></igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="24"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="24"></igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="32"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="32"></igx-circular-bar>
                 </div>
             </div>
             <div class="circular-samples">
                 <div class="circular-container">
-                    <igx-circular-bar [value]="43"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="43"></igx-circular-bar>
+                </div>
+                <div class="circular-container">
+                    <igx-circular-bar class="circular-sample" [value]="53"></igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="53"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="30"></igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="30"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [indeterminate]="true"></igx-circular-bar>
                 </div>
             </div>
             <div class="circular-samples">
                 <div class="circular-container">
-                     <igx-circular-bar [value]="currentValue" [textVisibility]="true">
+                     <igx-circular-bar class="circular-sample" [value]="currentValue" [textVisibility]="true">
                         <ng-template igxProcessBarText let-process>
                             <svg:tspan x="50" dy="-25" >Value is:</tspan>
                             <svg:tspan x="50" dy="25" font-weight="bold" font-size="30">{{process.value}}</tspan>
@@ -93,10 +101,10 @@ <h4 class="sample-title">Circular progress indicator</h4>
                     </igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="77" [text]="'Test'"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="77" [text]="'Test'"></igx-circular-bar>
                 </div>
                 <div class="circular-container">
-                    <igx-circular-bar [value]="44"></igx-circular-bar>
+                    <igx-circular-bar class="circular-sample" [value]="44"></igx-circular-bar>
                 </div>
             </div>
         </article>