<!-- Radial -->
<ng-container *ngIf="type =='radial'">
    <div class="circularProgress" [style.width]="outerWidth" [style.height]="outerHeight" [ngStyle]="pStyle">
        <div [style.background-color]="background" [style.width]="width+'px'" [style.height]="height+'px'" class="innerCircle"
            [ngClass]="type">
            <label attr.aria-label="{{progressvalue}} {{unit}} {{tooltip}}" [style.font-size]="size"
                [style.color]="labelcolor">
                <ng-container *ngIf="showlabel">{{progressvalue }}</ng-container>
                <ng-container *ngIf="showunit"> {{unit}}</ng-container>
            </label>
        </div>
    </div>
</ng-container>
<!-- Ring -->
<ng-container *ngIf="type =='ring'">
    <div class="circularProgress" [style.width]="outerWidth" [style.height]="outerHeight" [ngStyle]="pStyle">
        <div [style.width]="width+'px'" [style.height]="height+'px'" class="innerCircle" [ngClass]="type">
            <label attr.aria-label="{{progressvalue}} {{unit}} {{tooltip}}" [style.color]="labelcolor"
                [style.font-size]="size">
                <ng-container *ngIf="showlabel">{{progressvalue }}</ng-container>
                <ng-container *ngIf="showunit"> {{unit}}</ng-container>
            </label>
        </div>
    </div>
</ng-container>

<!-- Pie -->
<ng-container *ngIf="type =='pie'">
    <div class="circularProgress" [style.width]="outerWidth" [style.height]="outerHeight" [ngStyle]="pStyle">
        <div [style.width]="width+'px'" [style.height]="height+'px'" [ngClass]="type" class="innerCircle">
            <label attr.aria-label="{{progressvalue}} {{unit}} {{tooltip}}" [style.color]="labelcolor"
                [style.font-size]="size">
                <ng-container *ngIf="showlabel">{{progressvalue }}</ng-container>
                <ng-container *ngIf="showunit"> {{unit}}</ng-container>

            </label>
        </div>
    </div>
</ng-container>