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 b862f5f675b..cbddc10ef73 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
@@ -115,7 +115,6 @@
 
     @include e(text, $m: hidden) {
         @extend %circular-text !optional;
-        @extend %circular-text--hidden !optional;
     }
 
     @include m(indeterminate) {
@@ -124,9 +123,5 @@
         @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 58c097b0fa5..3044ddf69c5 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
@@ -292,10 +292,6 @@
         fill: --var($theme, 'text-color');
     }
 
-    %circular-text--hidden {
-        visibility: hidden;
-    }
-
     @include keyframes('indeterminate-accordion') {
         50% {
             stroke-dashoffset: 260;
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 fcfa3149b9d..486ea9a8d06 100644
--- a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
@@ -322,7 +322,8 @@ describe('IgCircularBar', () => {
 
         componentInstance.progressbar.textVisibility = false;
         fixture.detectChanges();
-        expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+        // Text is not rendered
+        expect(progressBarElem.children[2]).toBeFalsy();
     });
 
     it('When indeterminate mode is on value should not be updated', () => {
@@ -375,8 +376,8 @@ describe('IgCircularBar', () => {
 
             componentInstance.progressbar.textVisibility = false;
             fixture.detectChanges();
-
-            expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+            // Text is not rendered
+            expect(progressBarElem.children[2]).toBeFalsy();
         }));
 
         it('The max representation should respond correctly to passed maximum value', fakeAsync(() => {
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 933d9183e00..897d317016f 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
@@ -7,7 +7,7 @@
     [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 [class.igx-circular-bar__text--hidden]="!textVisibility" text-anchor="middle" x="50" y="60">
+    <text *ngIf="textVisibility" text-anchor="middle" x="50" y="60">
         <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate; context: context">
         </ng-container>
     </text>