File

projects/congarevenuecloud/elements/src/lib/icon/dots/dots.component.ts

Description

Animated blinking dots built from the bootstrap library to be used to show loading status.

Preview

Usage

Example :
import { IconModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [IconModule, ...]
})
export class AppModule {}
Example :
// Basic Usage
```typescript
<apt-dots></apt-dots>
Example :
// Larger size dots
```typescript
<apt-dots [large]="true"></apt-dots>

// Change color of dots with bootstrap text color class

Example :
<apt-dots color="text-warning"></apt-dots>

Metadata

Index

Inputs

Inputs

color
Type : "text-primary" | "text-secondary" | "text-success" | "text-danger" | "text-warning" | "text-info" | "text-light" | "text-dark"
Default value : 'text-primary'

Bootstrap text color class to set the color of the dots.

large
Type : boolean
Default value : false

Flag to set the dots to a larger size.

<div
  [class]="'spinner-grow ' + color"
  [class.spinner-grow-sm]="!large"
  role="status"
>
  <span class="sr-only">Loading...</span>
</div>
<div 
  [class]="'spinner-grow ' + color"
  [class.spinner-grow-sm]="!large"
  role="status"
  style="animation-delay: .1s;"
>
  <span class="sr-only">Loading...</span>
</div>
<div
  [class]="'spinner-grow ' + color"
  [class.spinner-grow-sm]="!large"
  role="status"
  style="animation-delay: .2s;"
>
  <span class="sr-only">Loading...</span>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""