From 4a6995be18b15de1834a39c8921a0e4109671bb6 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Fri, 3 Jun 2016 22:08:03 +0200
Subject: First draft to use webpack instead of systemjs

---
 client/src/app/videos/shared/loader/index.ts       |  1 +
 .../app/videos/shared/loader/loader.component.html |  3 +++
 .../app/videos/shared/loader/loader.component.scss | 26 ++++++++++++++++++++++
 .../app/videos/shared/loader/loader.component.ts   | 11 +++++++++
 4 files changed, 41 insertions(+)
 create mode 100644 client/src/app/videos/shared/loader/index.ts
 create mode 100644 client/src/app/videos/shared/loader/loader.component.html
 create mode 100644 client/src/app/videos/shared/loader/loader.component.scss
 create mode 100644 client/src/app/videos/shared/loader/loader.component.ts

(limited to 'client/src/app/videos/shared/loader')

diff --git a/client/src/app/videos/shared/loader/index.ts b/client/src/app/videos/shared/loader/index.ts
new file mode 100644
index 000000000..ab22584e4
--- /dev/null
+++ b/client/src/app/videos/shared/loader/index.ts
@@ -0,0 +1 @@
+export * from './loader.component';
diff --git a/client/src/app/videos/shared/loader/loader.component.html b/client/src/app/videos/shared/loader/loader.component.html
new file mode 100644
index 000000000..d02296a2d
--- /dev/null
+++ b/client/src/app/videos/shared/loader/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/videos/shared/loader/loader.component.scss b/client/src/app/videos/shared/loader/loader.component.scss
new file mode 100644
index 000000000..454195811
--- /dev/null
+++ b/client/src/app/videos/shared/loader/loader.component.scss
@@ -0,0 +1,26 @@
+div {
+  margin-top: 150px;
+}
+
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+    -animation: spin .7s infinite linear;
+    -ms-animation: spin .7s infinite linear;
+    -webkit-animation: spinw .7s infinite linear;
+    -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+    from { -moz-transform: rotate(0deg);}
+    to { -moz-transform: rotate(360deg);}
+}
diff --git a/client/src/app/videos/shared/loader/loader.component.ts b/client/src/app/videos/shared/loader/loader.component.ts
new file mode 100644
index 000000000..cdd07d1b4
--- /dev/null
+++ b/client/src/app/videos/shared/loader/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-loader',
+  styles: [ require('./loader.component.scss') ],
+  template: require('./loader.component.html')
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean;
+}
-- 
cgit v1.2.3