Angular Progress Bar

<div class="progress-container">
  <div class="progress-bar" [style.width]="barWidth + '%'"></div>
</div>

.progress-container {
  background-color: blue;
  width: 100%;
  max-width: 146px;
}

.progress-bar {
  background: orange;
  height: 4px;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: width 0.5s;
}

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-progress-bar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './progress-bar.component.html',
  styleUrl: './progress-bar.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgressBarComponent {
  @Input() barWidth: number = 40;
}

import type { Meta, StoryObj } from '@storybook/angular';

import { ProgressBarComponent } from './progress-bar.component';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta<ProgressBarComponent> = {
  title: 'App/Components/Progress Bar',
  component: ProgressBarComponent,
  tags: ['autodocs'],
  // Use `fn` to spy on the buttonClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
};

export default meta;
type Story = StoryObj<ProgressBarComponent>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Default: Story = {
  args: {},
};