[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / loaders / loader.component.ts

import { Component, Input } from '@angular/core'

@Component({
  selector: 'my-loader',
  template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
})
export class LoaderComponent {
  @Input() loading: boolean
  @Input() size: 'sm' | 'xl'

  private readonly sizes = {
    sm: {
      'width': '1rem',
      'height': '1rem',
      'border-width': '0.15rem'
    },
    xl: {
      width: '3rem',
      height: '3rem'
    }
  }

  getStyle () {
    if (!this.size) return undefined

    return this.sizes[this.size]
  }
}
Commit	Line	Data
	1	import { Component, Input } from '@angular/core'
	2
	3	@Component({
	4	selector: 'my-loader',
	5	template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
	6	})
	7	export class LoaderComponent {
	8	@Input() loading: boolean
	9	@Input() size: 'sm' \| 'xl'
	10
	11	private readonly sizes = {
	12	sm: {
	13	'width': '1rem',
	14	'height': '1rem',
	15	'border-width': '0.15rem'
	16	},
	17	xl: {
	18	width: '3rem',
	19	height: '3rem'
	20	}
	21	}
	22
	23	getStyle () {
	24	if (!this.size) return undefined
	25
	26	return this.sizes[this.size]
	27	}
	28	}