projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -459,26 +459,26 @@
     ), $variant);
 
     $palette: map.get($theme, 'palette');
-    $circular-value-fs: rem(32px, 16px);
-    $circular-value-fw: 600;
 
     %circular-display {
         display: inline-flex;
         flex: 1 1 auto;
         width: rem(32px);
         height: rem(32px);
+        position: relative;
 
         svg {
             width: 100%;
             height: 100%;
             min-width: inherit;
             min-height: inherit;
+            //transform-origin: 50% 50%;
+            transform: rotate(-90deg);
         }
     }
 
     %circular-display--indeterminate {
         @include animation(rotate-center 3s linear normal infinite);
-        transform-origin: 50% 50%;
 
         [dir='rtl'] & {
             animation-direction: reverse;
@@ -496,8 +496,6 @@
         stroke-width: $stroke-width;
         stroke-dashoffset: 289;
         stroke-dasharray: 289;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
 
         @if $variant == 'indigo-design' {
             stroke-linecap: round;
@@ -514,8 +512,14 @@
     }
 
     %circular-text {
-        font-size: $circular-value-fs;
-        font-weight: $circular-value-fw;
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        transform: translate(-50%, -50%);
+        font-size: rem(16px);
+        line-height: 1;
+        text-align: center;
+        font-weight: 600;
         fill: var-get($theme, 'text-color');
     }
 

projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts

@@ -227,7 +227,7 @@ describe('IgxCircularBar', () => {
             expect(bar.classList.contains(CIRCULAR_INDETERMINATE_CLASS)).toEqual(true);
 
             // Expect text in indeterminate bar to be hidden;
-            expect(getComputedStyle(bar.querySelector('text').firstElementChild).visibility).toEqual('hidden');
+            expect(getComputedStyle(bar.querySelector('span')).visibility).toEqual('hidden');
         });
 
         it('should manipulate progressbar with floating point numbers', () => {
@@ -241,26 +241,26 @@ describe('IgxCircularBar', () => {
 
             const progressRepresentation = toPercent(val, maxVal);
             const progressBarElem = fixture.debugElement.nativeElement;
-            const valueInPercent = progressBarElem.querySelector('text').firstElementChild;
+            const valueInPercent = progressBarElem.querySelector('span');
             expect(valueInPercent.textContent.trim()).toBe(`${progressRepresentation}%`);
         });
 
         it('should respond to passed values correctly', () => {
             const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
-            const textElement = fixture.debugElement.query(By.css('text')).nativeElement;
+            const textElement = fixture.debugElement.query(By.css('span')).nativeElement;
             let expectedTextContent = progress.value + '%';
 
             expect(progressBarElem.attributes['aria-valuenow'].textContent).toBe(progress.value.toString());
             expect(progressBarElem.attributes['aria-valuemax'].textContent).toBe(progress.max.toString());
 
-            expect(textElement.children[0].classList.value).toBe(CIRCULAR_TEXT_CLASS);
-            expect(textElement.children[0].textContent.trim()).toMatch(expectedTextContent);
+            expect(textElement.classList.value).toBe(CIRCULAR_TEXT_CLASS);
+            expect(textElement.textContent.trim()).toMatch(expectedTextContent);
 
             expectedTextContent = 'No progress';
             progress.text = expectedTextContent;
             fixture.detectChanges();
 
-            expect(textElement.children[0].textContent.trim()).toMatch(expectedTextContent);
+            expect(textElement.textContent.trim()).toMatch(expectedTextContent);
         });
 
         it('should respond correctly to passed maximum value', () => {
@@ -295,7 +295,7 @@ describe('IgxCircularBar', () => {
 
             const componentInstance = fixture.componentInstance;
             const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
-            const textElement = fixture.debugElement.query(By.css('text')).nativeElement;
+            const textElement = fixture.debugElement.query(By.css('span')).nativeElement;
 
             fixture.detectChanges();
             expect(progressBarElem.attributes['aria-valuenow'].textContent).toBe('20');
@@ -320,15 +320,15 @@ describe('IgxCircularBar', () => {
 
             const componentInstance = fixture.componentInstance;
             const progressBarElem = fixture.debugElement.query(By.css('svg')).nativeElement;
-            const textElement = fixture.debugElement.query(By.css('text')).nativeElement;
+            const textElement = fixture.debugElement.query(By.css('span')).nativeElement;
 
             fixture.detectChanges();
             expect(progressBarElem.attributes['aria-valuenow'].textContent).toBe('20');
 
             expect(progressBarElem.children[0]).toHaveClass(CIRCULAR_INNER_CLASS);
             expect(progressBarElem.children[1]).toHaveClass(CIRCULAR_OUTER_CLASS);
 
-            expect(textElement.children[0].textContent.trim()).toBe('20%');
+            expect(textElement.textContent.trim()).toBe('20%');
 
             componentInstance.progressbar.textVisibility = false;
             fixture.detectChanges();

projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html

@@ -7,11 +7,6 @@
     [attr.aria-valuenow]="value">
     <svg:circle class="igx-circular-bar__inner" cx="50" cy="50" r="46" />
     <svg:circle #circle class="igx-circular-bar__outer" cx="50" cy="50" r="46" />
-    <svg:text *ngIf="textVisibility" text-anchor="middle" x="50" y="60">
-        <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate;
-            context: context">
-        </ng-container>
-    </svg:text>
 
     <svg:defs>
         <ng-container
@@ -20,12 +15,6 @@
         </ng-container>
     </svg:defs>
 
-    <ng-template #defaultTextTemplate>
-        <svg:tspan class="igx-circular-bar__text">
-            {{textContent ? textContent: valueInPercent + '%'}}
-        </svg:tspan>
-    </ng-template>
-
     <ng-template #defaultGradientTemplate>
         <svg:linearGradient [id]="gradientId" gradientTransform="rotate(90)">
           <stop offset="0%"   class="igx-circular-bar__gradient-start" />
@@ -34,3 +23,13 @@
     </ng-template>
 </svg>
 
+<span class="igx-circular-bar__text" *ngIf="textVisibility">
+    <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate;
+            context: context">
+    </ng-container>
+</span>
+
+<ng-template #defaultTextTemplate>
+    {{textContent ? textContent: valueInPercent + '%'}}
+</ng-template>
+

src/app/progressbar/progressbar.sample.html

@@ -91,8 +91,8 @@ <h4 class="sample-title">Circular progress indicator</h4>
             <div class="circular-container">
                  <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>
+                        <div>{{process.value}}</div>
+                        <small class="sample-label">TOTAL%</small>
                     </ng-template>
                 </igx-circular-bar>
             </div>

src/app/progressbar/progressbar.sample.scss

@@ -27,6 +27,12 @@
     z-index: 24;
 }
 
+.sample-label {
+    display: block;
+    font-size: 6px;
+    white-space: nowrap;
+}
+
 .custom-gradient {
     // $circ-theme: igx-progress-circular-theme(
     //     $progress-circle-color: purple orange,

src/styles/_variables.scss

@@ -1,9 +1,9 @@
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 
-$palette: $light-material-palette;
-$schema: $light-material-schema;
-$typeface: $material-typeface;
-$type-scale: $material-type-scale;
+$palette: $light-bootstrap-palette;
+$schema: $light-bootstrap-schema;
+$typeface: $bootstrap-typeface;
+$type-scale: $bootstrap-type-scale;
 
 $background-color: contrast-color($palette, 'grays', 900);
 $foreground-color: color($palette, 'grays', 900);