feat: improve loader (use color input props)

Author: LouisMazel

README.md

@@ -54,7 +54,7 @@ Vue.component('vue-input-ui', VueInputUi);
 | v-model    | String/Int | true     | -          | -              |
 | id      | String     | false    | VueInputUi | -              |
 | label      | String     | false    | Enter Text | -              |
-| type       | String     | no       | text       | text or number |
+| type       | String     | no       | text       | [text|number|textarea] |
 | size | String `sm or lg`    | no       | false      |                |
 | color | String `HEX`   | no       | dogderblue      |                |
 | hint*       | String       | no       | -          |                |
@@ -64,6 +64,7 @@ Vue.component('vue-input-ui', VueInputUi);
 | required | Boolean    | no       | false      |                |
 | readonly | Boolean    | no       | false      |                |
 | clearable | Boolean    | no       | false      |                |
+| loader | Boolean    | no       | false      |                |
 
 ## Contribution
 

src/VueInputUi/index.vue

@@ -70,7 +70,12 @@
       v-if="loader"
       class="loader"
       :class="{ textarea }"
-    />
+    >
+      <div
+        class="loader__progress-bar"
+        :style="[loaderProgressBarBg]"
+      />
+    </div>
   </div>
 </template>
 
@@ -114,6 +119,9 @@
           ? { color: `${this.valid ? this.validColor : this.color}` }
           : null
       },
+      loaderProgressBarBg () {
+        return { backgroundColor: this.color }
+      },
       inputValue: {
         get () {
           return this.value
@@ -163,6 +171,9 @@
   }
   .field.vue-input-ui {
     position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+
     &.is-dark {
       .field-label{
         color: rgba(white, 0.70);
@@ -327,6 +338,30 @@
     .lm-text-danger {
       color: orangered !important;
     }
+
+    .loader {
+      top: -2px;
+      height: 2px;
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      border-radius: 4px;
+
+      &.textarea {
+        top: -7px;
+      }
+
+      &__progress-bar {
+        display: block;
+        position: absolute;
+        content: '';
+        left: -200px;
+        width: 200px;
+        height: 2px;
+        animation: loading 2s linear infinite;
+      }
+    }
+
     &.is-dark {
       ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
         color: rgba(white, 0.70);
@@ -413,29 +448,6 @@
         }
       }
     }
-    .loader {
-      top: -2px;
-      height: 2px;
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-      border-radius: 2px;
-
-      &.textarea {
-        top: -7px;
-      }
-
-      &::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 {