ProgressIndicator

import { useEffect, useState } from 'react';
import { ProgressIndicator } from '@udixio/ui-react';

export default function ProgressIndicatorDeterminateReact() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue((previous) => (previous >= 100 ? 0 : previous + 20));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center gap-6">
      <ProgressIndicator
        variant="linear-determinate"
        value={value}
        transitionDuration={300}
        aria-label="Download progress"
        className="w-48"
      />
      <ProgressIndicator
        variant="circular-determinate"
        value={value}
        transitionDuration={300}
        aria-label="Download progress"
      />
    </div>
  );
}

import {
  ChangeDetectionStrategy,
  Component,
  type OnDestroy,
  type OnInit,
  signal,
} from '@angular/core';
import { ProgressIndicator } from '@udixio/ui-angular';

@Component({
  selector: 'docs-progress-indicator-determinate-angular',
  standalone: true,
  imports: [ProgressIndicator],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex items-center gap-6">
      <udx-progress-indicator
        variant="linear-determinate"
        [value]="value()"
        [transitionDuration]="300"
        aria-label="Download progress"
        class="w-48"
      />
      <udx-progress-indicator
        variant="circular-determinate"
        [value]="value()"
        [transitionDuration]="300"
        aria-label="Download progress"
      />
    </div>
  `,
})
export class ProgressIndicatorDeterminateAngular implements OnInit, OnDestroy {
  protected readonly value = signal(0);
  private intervalId?: ReturnType<typeof setInterval>;

  ngOnInit(): void {
    this.intervalId = setInterval(() => {
      this.value.update((previous) => (previous >= 100 ? 0 : previous + 20));
    }, 1000);
  }

  ngOnDestroy(): void {
    clearInterval(this.intervalId);
  }
}

import { ProgressIndicator } from '@udixio/ui-react';

export default function ProgressIndicatorIndeterminateReact() {
  return (
    <div className="flex items-center gap-6">
      <ProgressIndicator
        variant="linear-indeterminate"
        aria-label="Loading"
        className="w-48"
      />
      <ProgressIndicator
        variant="circular-indeterminate"
        aria-label="Loading"
      />
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ProgressIndicator } from '@udixio/ui-angular';

@Component({
  selector: 'docs-progress-indicator-indeterminate-angular',
  standalone: true,
  imports: [ProgressIndicator],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex items-center gap-6">
      <udx-progress-indicator
        variant="linear-indeterminate"
        aria-label="Loading"
        class="w-48"
      />
      <udx-progress-indicator
        variant="circular-indeterminate"
        aria-label="Loading"
      />
    </div>
  `,
})
export class ProgressIndicatorIndeterminateAngular {}