Use bootstrap loader

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

diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a886b2eaec2ca2f4e3f6cd171b1c1087..ce8685a094586ba7360a02b4373990032d8605ee 100644 (file)
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
-  templateUrl: './loader.component.html'
+  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': '.2em'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+
+  getStyle () {
+    if (!this.size) return undefined
+
+    return this.sizes[this.size]
+  }
 }