Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Basic Progress Bars
  • Custom Labels and Striped
  • Current Value Labels
  • Progress Bars height

Was this helpful?

  1. Components

Progress Bar

PreviousDropdownsNextTabs

Last updated 5 years ago

Was this helpful?

To use Progress Bar, first import SharedModule in your module.

import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}

Basic Progress Bars

<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>

Custom Labels and Striped

<ngb-progressbar type="success" [value]="25">25</ngb-progressbar>
<ngb-progressbar type="info" [value]="50">Copying file 2 of 4...</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [striped]="true">Completed!</ngb-progressbar>

Current Value Labels

<ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar>

Progress Bars height

<ngb-progressbar type="success" [value]="25">default</ngb-progressbar>
<ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar>

For more information about options, check the

Ng-Bootstrap