Creating A Twitter-Inspired SVG Progress Indicator In Angular 5.0.1

// Import the core angular services.
import { ChangeDetectionStrategy } from "@angular/core";
import { Component } from "@angular/core";
import { OnChanges } from "@angular/core";
import { SimpleChanges } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "progress-indicator",
	inputs: [
		"percent",
		"color",
		"backgroundColor"
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	styleUrls: [ "./progress-indicator.component.less" ],
	template:
	`
		<svg viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
			<circle
				*ngIf="backgroundColor"
				cx="10"
				cy="10"
				r="9"
				fill="none"
				[attr.stroke]="backgroundColor"
				stroke-width="2">
			</circle>

			<circle
				cx="10"
				cy="10"
				r="9"
				fill="none"
				[attr.stroke]="color"
				stroke-width="2"
				stroke-linecap="round"
				[attr.stroke-dasharray]="dashArray"
				transform="rotate( -90, 10, 10 )"
				[class.empty]="! percent">
			</circle>
		</svg>
	`
})
export class ProgressIndicatorComponent implements OnChanges {

	public backgroundColor: string;
	public color: string;
	public dashArray: string;
	public percent: number;

	// I initialize the progress-indicator component.
	constructor() {

		this.backgroundColor = "#CCD6DD";
		this.color = "currentColor"; // Will inherit the current color context.
		this.dashArray = "0,100";
		this.percent = 0;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called every time the input bindings are updated.
	public ngOnChanges( changes: SimpleChanges ) : void {

		// Validate and constrain the percentage.
		if ( isNaN( this.percent ) || ( this.percent < 0 ) ) {

			this.percent = 0;

		} else if ( this.percent > 100 ) {

			this.percent = 100;

		}

		// Normalize the background color.
		if ( this.backgroundColor === "none" ) {

			this.backgroundColor = "";

		}

		// The progress indicator is implemented as the first dash in a dashed-path stroke
		// of the circle SVG. In order to translate the percent-input into a dash length,
		// we have to determine the circumference of the circle. Then, the length of the
		// completed portion is simply the percentage translation of the circumference.
		var radius = 9;
		var totalLength = ( Math.PI * 2 * radius );
		var pathLength = ( totalLength * this.percent / 100 );

		this.dashArray = `${ pathLength },100`;

	}

}

:host {
	color: #1DA1F2 ;
	display: inline-block ;
	height: 20px ;
	width: 20px ;
}

svg {
	display: block ;
	height: 100% ;
	width: 100% ;
}

circle {
	opacity: 1.0 ;
	transition: stroke-dasharray ease 150ms, opacity ease-out 200ms ;
}

circle.empty {
	/*
		When the SVG circle has a first-dash of zero, it's still visible in the stroke.
		As such, we want to hide the circle when there is no percentage. But, we don't
		want to strip it out of the page, otherwise the transition won't work for the
		"stroke-dasharray" property. As such, we'll use the opacity so that we can hide
		it without janking the transition.
	*/
	opacity: 0.0 ;
}

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<textarea
			maxlength="140"
			(input)="percent = ( $event.target.value.length / 140 * 100 )"
		></textarea>

		<div class="indicators">
			<progress-indicator [percent]="percent"></progress-indicator>
			<progress-indicator [percent]="percent" color="magenta"></progress-indicator>
			<progress-indicator [percent]="percent" [style.color]="'orange'"></progress-indicator>
			<progress-indicator [percent]="percent" backgroundColor="#F0F0F0"></progress-indicator>
			<progress-indicator [percent]="percent" backgroundColor="none"></progress-indicator>
		</div>

		<progress-indicator
			[percent]="percent"
			[style.width.px]="100"
			[style.height.px]="100">
		</progress-indicator>
	`
})
export class AppComponent {

	public percent: number = 0;

}