X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-main%2Floaders%2Floader.component.ts;h=bd038f8b5514fd4368ab2af10b981ac7b46985c7;hb=1279c05eeb6d14fdc188b3e23fb4f3f2bfda70ee;hp=e3b1eea3a886b2eaec2ca2f4e3f6cd171b1c1087;hpb=67ed6552b831df66713bac9e672738796128d33f;p=github%2FChocobozzz%2FPeerTube.git

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 e3b1eea3a..bd038f8b5 100644
--- 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': '0.15rem'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+
+  getStyle () {
+    if (!this.size) return undefined
+
+    return this.sizes[this.size]
+  }
 }