feat(fr-progress-bar): Add new component fr-progress-bar

src/app/progress/bar/bar.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fr-progress-bar',
+  template: `
+    <div class="fr-progress-bar">
+      <div class="fr-progress-bar__background"></div>
+      <div class="fr-progress-bar__first-bar"></div>
+      <div class="fr-progress-bar__second-bar"></div>
+    </div>
+  `
+})
+export class FrBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/progress/progress.module.ts

@@ -2,16 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { FrSpinnerComponent } from './spinner/spinner.component';
+import { FrBarComponent } from './bar/bar.component';
 
 @NgModule({
   declarations: [
-    FrSpinnerComponent
+    FrSpinnerComponent,
+    FrBarComponent
   ],
   imports: [
     CommonModule
   ],
   exports: [
-    FrSpinnerComponent
+    FrSpinnerComponent,
+    FrBarComponent
   ]
 })
 export class FrProgressModule { }

src/demo/progress-demo.component.ts

@@ -6,6 +6,8 @@ import { Component } from '@angular/core';
   <h1>Progress demo</h1>
   <h2>Spinner</h2>
   <fr-spinner></fr-spinner>
+  <h2>Bar</h2>
+  <fr-progress-bar></fr-progress-bar>
   `
 })
 export class ProgressDemoComponent {

src/styles/_progress.scss

@@ -24,3 +24,57 @@
   50% { stroke-dashoffset: 980; }
   100% { stroke-dashoffset: 450; }
 }
+
+.fr-progress-bar {
+  position: relative;
+  display: block;
+  height: 5px;
+  width: 100%;
+  overflow: hidden;
+
+  &__background {
+    position: absolute;
+    display: block;
+    height: 5px;
+    width: 100%;
+    background: $light-gray;
+  }
+
+  &__first-bar {
+    display: inline-block;
+    position: absolute;
+    height: 5px;
+    width: 50%;
+    background: $blue;
+    transform: translateX(-100%);
+    animation: slide 3s linear infinite;
+  }
+
+  &__second-bar {
+    display: inline-block;
+    position: absolute;
+    height: 5px;
+    width: 35%;
+    background: $blue;
+    animation: slide2 3s linear infinite;
+    animation-delay: 1s;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(500%);
+  }
+}
+@keyframes slide2 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(300%);
+  }
+}