WIP component spinner.

src/layouts/component-test/component-test.vue

@@ -89,6 +89,7 @@
         radioID="2021"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
         <radioList
         groupName="demo"
@@ -96,6 +97,7 @@
         radioID="2020"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
         <radioList
         groupName="demo"
@@ -103,6 +105,7 @@
         radioID="2019"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
       </div>
     </div>

src/styles/mixins/customMixins.scss

@@ -38,16 +38,16 @@
       }
     }
     //Spinner position
-    &.center:after {
+    &.center {
       left: 0;
       right: 0;
       margin: 0 auto;
     }
-    &.right:after {
+    &.right {
-      right: 1rem;
+      margin: 0 0 0 auto;
     }
-    &.left:after {
+    &.left {
-      left: 1rem;
+      margin: 0 auto 0 0;
     }
     //Spinner color
     &:after { //Default spinner color (blue) if no other color is specified from the options below

src/ux-components/radio-list/radio-list.vue

@@ -2,8 +2,12 @@
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
     <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
     <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
-    
+    >{{radioID}}
-    >{{radioID}}</label>
+    <loader
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
+      v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    />
+  </label>
     <p class="small">{{errorMessage}}</p>
   </div>
 </template>
@@ -18,7 +22,8 @@ export default {
     "radioID",
     "errorMessage",
     "loaderColor",
-    "loaderPosition"
+    "loaderPosition",
+    "sizeInRem"
 
   ],
   data() {
@@ -32,5 +37,8 @@ export default {
       this.isLoading = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>