# Angular Linear Progress (リニア プログレス) コンポーネントの概要
The Ignite UI for Angular Linear Progress Bar Indicator component provides a visual indicator of an application's process as it changes. The indicator updates its appearance as its state changes. The indicator can be styled with a choice of colors in stripes or solids.
## Angular Linear Progress の例
[Angular Linear Progress の例](https://www.infragistics.com/angular-demos/data-display/linear-progressbar)
---
## Ignite UI for Angular Linear Progress を使用した作業の開始
Ignite UI for Angular Linear Progress コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
```cmd
ng add igniteui-angular
```
Ignite UI for Angular については、「[はじめに](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started.md)」トピックをご覧ください。
次に、**app.module.ts** ファイルに `IgxProgressBarModule` をインポートします。
```typescript
// app.module.ts
...
import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxProgressBarModule],
...
})
export class AppModule {}
```
あるいは、`16.0.0` 以降、`IgxLinearProgressBarComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_LINEAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
```typescript
// home.component.ts
import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
// import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES],
/* or imports: [IgxLinearProgressBarComponent] */
})
export class HomeComponent {
public progress = 50;
}
```
Ignite UI for Angular Progress Bar モジュールまたはディレクティブをインポートしたので、`igx-linear-bar` コンポーネントの使用を開始できます。
## Angular Linear Progress の使用
すべてがどのように動作することを確認できるために、デモのような簡単な例を作成します。
```html
```
その後、ブラウザ上でデモサンプルを確認することができます。
### プログレス タイプ
[`type`](https://www.infragistics.com/api/angular/igniteui-angular/latest/classes/IgxLinearProgressBarComponent#type) 属性を使用してバーのタイプを設定できます。リニア プログレス バーには、`default`、`error`、`success`、`info`、および `warning` の 5 つのタイプがあります。
### ストライプ プログレス
バーをストライプ スタイルにするには、[`striped`](https://www.infragistics.com/api/angular/igniteui-angular/latest/classes/IgxLinearProgressBarComponent#striped) プロパティを使用して `true` に設定します。
プログレス バーの様々なタイプを作成する方法を例で紹介します。
```html