AvesraAvesrabeta

Progress Circle

A circular progress indicator that shows determinate or indeterminate progress.

Import

import { AvProgressCircleImports } from '@avesra/angular';

Usage

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';

@Component({
  selector: 'app-progress-circle-basic-demo',
  imports: [AvProgressCircleImports],
  template: `<div av-progress-circle aria-label="Loading" [value]="60">
  <svg av-progress-circle-track>
    <circle av-progress-circle-track-circle></circle>
    <circle av-progress-circle-fill-circle></circle>
  </svg>
</div>`,
})
export class ProgressCircleBasicDemo {}

Anatomy

Import the Progress Circle parts and compose them with attribute selectors on <div>, <svg>, and <circle> hosts. Project av-progress-circle-track, av-progress-circle-track-circle, and av-progress-circle-fill-circle inside div[av-progress-circle]. Pair with shared label[av-label] when a visible label is needed. 

<div av-progress-circle aria-label="Loading" [value]="60">
  <svg av-progress-circle-track>
    <circle av-progress-circle-track-circle></circle>
    <circle av-progress-circle-fill-circle></circle>
  </svg>
</div>

Sizes

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';
import type { AvProgressCircleSize } from '@avesra/angular';

interface ProgressCircleSizeDemo {
  size: AvProgressCircleSize;
  value: number;
}

@Component({
  selector: 'app-progress-circle-sizes-demo',
  imports: [AvProgressCircleImports],
  template: `<div class="flex items-center gap-6">
  @for (item of items; track item.size) {
    <div av-progress-circle aria-label="Loading" [size]="item.size" [value]="item.value">
      <svg av-progress-circle-track>
        <circle av-progress-circle-track-circle></circle>
        <circle av-progress-circle-fill-circle></circle>
      </svg>
    </div>
  }
</div>`,
})
export class ProgressCircleSizesDemo {
  readonly items: ProgressCircleSizeDemo[] = [
    { size: 'sm', value: 40 },
    { size: 'md', value: 60 },
    { size: 'lg', value: 80 },
  ];
}

Colors

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';
import type { AvProgressCircleColor } from '@avesra/angular';

interface ProgressCircleColorDemo {
  color: AvProgressCircleColor;
  label: string;
}

@Component({
  selector: 'app-progress-circle-colors-demo',
  imports: [AvProgressCircleImports],
  template: `<div class="flex items-center gap-6">
  @for (item of items; track item.color) {
    <div av-progress-circle [aria-label]="item.label" [color]="item.color" [value]="60">
      <svg av-progress-circle-track>
        <circle av-progress-circle-track-circle></circle>
        <circle av-progress-circle-fill-circle></circle>
      </svg>
    </div>
  }
</div>`,
})
export class ProgressCircleColorsDemo {
  readonly items: ProgressCircleColorDemo[] = [
    { color: 'default', label: 'Default' },
    { color: 'accent', label: 'Accent' },
    { color: 'success', label: 'Success' },
    { color: 'warning', label: 'Warning' },
    { color: 'danger', label: 'Danger' },
  ];
}

Indeterminate

Use is-indeterminate when progress cannot be determined. 

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';

@Component({
  selector: 'app-progress-circle-indeterminate-demo',
  imports: [AvProgressCircleImports],
  template: `<div av-progress-circle aria-label="Loading" is-indeterminate>
  <svg av-progress-circle-track>
    <circle av-progress-circle-track-circle></circle>
    <circle av-progress-circle-fill-circle></circle>
  </svg>
</div>`,
})
export class ProgressCircleIndeterminateDemo {}

With Label

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressCircleImports,
} from '@avesra/angular';

@Component({
  selector: 'app-progress-circle-with-label-demo',
  imports: [
    AvProgressCircleImports,
    AvLabelComponent,
  ],
  template: `<div class="flex items-center gap-3">
  <div av-progress-circle aria-label="Loading" [value]="75">
    <svg av-progress-circle-track>
      <circle av-progress-circle-track-circle></circle>
      <circle av-progress-circle-fill-circle></circle>
    </svg>
  </div>
  <label av-label>75% Complete</label>
</div>`,
})
export class ProgressCircleWithLabelDemo {}

Custom SVG Props

Since each part is a composable component, you can override SVG attributes like stroke-width, r, cx, cy, and viewBox directly. 

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';

@Component({
  selector: 'app-progress-circle-custom-svg-demo',
  imports: [AvProgressCircleImports],
  template: `<div class="flex items-end gap-6">
  <div av-progress-circle aria-label="Thin circle" [value]="60">
    <svg av-progress-circle-track viewBox="0 0 36 36">
      <circle av-progress-circle-track-circle [cx]="18" [cy]="18" [r]="17" stroke-width="2"></circle>
      <circle av-progress-circle-fill-circle [cx]="18" [cy]="18" [r]="17" stroke-width="2"></circle>
    </svg>
  </div>

  <div av-progress-circle aria-label="Default circle" [value]="60">
    <svg av-progress-circle-track>
      <circle av-progress-circle-track-circle></circle>
      <circle av-progress-circle-fill-circle></circle>
    </svg>
  </div>

  <div av-progress-circle aria-label="Thick circle" [value]="60">
    <svg av-progress-circle-track viewBox="0 0 36 36">
      <circle av-progress-circle-track-circle [cx]="18" [cy]="18" [r]="15" stroke-width="6"></circle>
      <circle av-progress-circle-fill-circle [cx]="18" [cy]="18" [r]="15" stroke-width="6"></circle>
    </svg>
  </div>
</div>`,
})
export class ProgressCircleCustomSvgDemo {}

Styling

Passing Tailwind CSS classes

Pass utility classes on individual Progress Circle parts — for example av-progress-circle-fill-circle. 

import { Component } from '@angular/core';
import { AvProgressCircleImports } from '@avesra/angular';

@Component({
  selector: 'app-progress-circle-custom-styling-demo',
  imports: [AvProgressCircleImports],
  template: `<div av-progress-circle aria-label="Loading" [value]="60">
  <svg av-progress-circle-track>
    <circle av-progress-circle-track-circle></circle>
    <circle av-progress-circle-fill-circle class="!stroke-purple-500"></circle>
  </svg>
</div>`,
})
export class ProgressCircleCustomStylingDemo {}

Customizing the component classes

To customize the Progress Circle classes, use the @layer components directive. Learn more. 

@layer components {
  .av-progress-circle {
    @apply inline-flex;
  }

  .av-progress-circle__track {
    @apply size-12;
  }

  .av-progress-circle__fill-circle {
    stroke: purple;
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Progress Circle component uses these CSS classes:

Base & Element Classes

  • .av-progress-circle — Base container
  • .av-progress-circle__track — SVG element
  • .av-progress-circle__track-circle — Background circle
  • .av-progress-circle__fill-circle — Progress arc

Size Classes

  • .av-progress-circle--sm — Small size variant
  • .av-progress-circle--md — Medium size variant (default)
  • .av-progress-circle--lg — Large size variant

Color Classes

  • .av-progress-circle--default — Default color variant
  • .av-progress-circle--accent — Accent color variant
  • .av-progress-circle--success — Success color variant
  • .av-progress-circle--warning — Warning color variant
  • .av-progress-circle--danger — Danger color variant

API

Props for div[av-progress-circle]. Track and circle parts also accept SVG overrides (viewBox, cx, cy, r, stroke-width). Compose with shared label[av-label] when a visible label is needed.

PropTypeDefaultDescription
valuenumber0The current value (div[av-progress-circle]).
minnumber0The minimum value (div[av-progress-circle]).
maxnumber100The maximum value (div[av-progress-circle]).
is-indeterminatebooleanfalseWhether progress is indeterminate (div[av-progress-circle]).
size'sm' | 'md' | 'lg''md'Size of the circle (div[av-progress-circle]).
color'default' | 'accent' | 'success' | 'warning' | 'danger''accent'Color of the progress arc (div[av-progress-circle]).
disabledbooleanfalseDisables the progress indicator (div[av-progress-circle]).
aria-labelstring—Accessible label for screen readers (div[av-progress-circle]).
viewBoxstring'0 0 36 36'SVG viewBox on svg[av-progress-circle-track].
cxnumber18Circle center x (track-circle / fill-circle).
cynumber18Circle center y (track-circle / fill-circle).
rnumber16Circle radius (track-circle / fill-circle).
stroke-widthnumber4Stroke width (track-circle / fill-circle).

Made with ❤ by SyntaxHertz. Open source and available on GitHub.