Topic/1058 loading indicator

coscine/issues#1058

src/components/Loader/LoadingBar.vue

+<template>
+  <div class="loading-indicator"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'CoscineLoadingBar',
+  methods: {
+  },
+});
+</script>
+<style>
+.loading-indicator, .loading-indicator:before {
+  height: 3px;
+  width: 100%;
+  margin: 0;
+}
+.loading-indicator {
+  position: relative;
+  height: 3px;
+  display: block;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 2px;
+  overflow: hidden;
+  background-color: #e9ecef;
+}
+.loading-indicator:before {
+  width: 40%;
+  content:          '';
+  position:         absolute;
+  background-color: #00549f;
+  top:              0;
+  left:             0;
+  bottom:           0;
+  will-change:      left, right;
+  animation:        running-progress 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+.loading-indicator::after {
+  width: 40%;
+  content:          '';
+  position:         absolute;
+  background-color: #00549f;
+  top:              0;
+  left:             0;
+  bottom:           0;
+  will-change:      left, right;
+  animation:        running-progress-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
+}
+@keyframes running-progress {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes running-progress-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+</style>
\ No newline at end of file