[Feature] Add loader bar

Author: LouisMazel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-input-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A beautiful input made with Vue JS",
   "author": "Louis Mazel <mazuel.loic@gmail.com>",
   "scripts": {

src/App.vue

@@ -80,6 +80,7 @@
           hint="is required"
           :dark="darkMode"
           required
+          loader
         />
         <br>
         <VueInputUi
@@ -88,6 +89,7 @@
           :dark="darkMode"
           textarea
           rows="4"
+          loader
         />
       </div>
     </div>

src/VueInputUi/index.vue

@@ -50,6 +50,10 @@
     >
       {{ hintValue || labelValue }}
     </label>
+    <div
+      v-if="loader"
+      class="loader"
+    />
   </div>
 </template>
 
@@ -71,7 +75,8 @@
       valid: { type: Boolean, default: false },
       validColor: { type: String, default: 'yellowgreen' },
       required: { type: Boolean, default: false },
-      textarea: { type: Boolean, default: false }
+      textarea: { type: Boolean, default: false },
+      loader: { type: Boolean, default: false },
     },
     data: function () {
       return {
@@ -328,5 +333,51 @@
         }
       }
     }
+    .loader {
+      top: -2px;
+      height: 2px;
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      border-radius: 2px;
+
+      &::before {
+        display: block;
+        position: absolute;
+        content: '';
+        left: -200px;
+        width: 200px;
+        height: 2px;
+        background-color: rgba(black, 0.2);
+        animation: loading 2s linear infinite;
+      }
+    }
+
+    @keyframes loading {
+      from {
+        left: -200px;
+        width: 30%;
+      }
+
+      50% {
+        width: 30%;
+      }
+
+      70% {
+        width: 70%;
+      }
+
+      80% {
+        left: 50%;
+      }
+
+      95% {
+        left: 120%;
+      }
+
+      to {
+        left: 100%;
+      }
+    }
   }
 </style>