feat: Crossbrowser CSS for Ajax Bar

dev/components/components/ajax-bar.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <q-ajax-bar ref="bar" :position="position" :reverse="reverse" :size="computedSize" :color="color"></q-ajax-bar>
+    <div class="layout-padding" style="max-width: 600px;">
+      <p class="caption">Ajax Bar component captures Ajax calls automatically. This page here triggers events manually for demonstrating purposes only.</p>
+
+      <div class="card" style="margin-top: 25px">
+        <div class="card-title bg-primary text-center">
+          <button class="orange push" @click="trigger()">Trigger Event</button>
+        </div>
+
+        <p class="caption text-center">Try out some combinations for Ajax Bar.</p>
+        <div class="card-content group column">
+          <div class="auto column items-center">
+            <div class="flex">
+              <div class="column group">
+                <label>
+                  <q-radio v-model="position" val="top"></q-radio>
+                  Top
+                </label>
+                <label>
+                  <q-radio v-model="position" val="bottom"></q-radio>
+                  Bottom
+                </label>
+              </div>
+
+              <div class="column group">
+                <label>
+                  <q-radio v-model="position" val="right"></q-radio>
+                  Right
+                </label>
+                <label>
+                  <q-radio v-model="position" val="left"></q-radio>
+                  Left
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div class="row justify-center" style="margin-top: 15px;">
+            <label style="white-space: nowrap;">
+              <q-checkbox v-model="reverse"></q-checkbox>
+              Reverse Direction
+            </label>
+          </div>
+
+          <div>
+            <span>Size (<em>{{size}}px</em>)</span>
+            <q-range v-model="size" :min="2" :max="20" label-always style="margin-top: 25px;"></q-range>
+          </div>
+
+          <div class="auto column items-center">
+            <div class="flex">
+              <div class="floating-label">
+                <input required v-model="color">
+                <label>Color</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      position: 'bottom',
+      reverse: false,
+      size: 8,
+      color: '#e21b0c',
+
+      timeouts: []
+    }
+  },
+  computed: {
+    computedSize () {
+      return this.size + 'px'
+    }
+  },
+  methods: {
+    trigger () {
+      this.$refs.bar.start()
+
+      setTimeout(() => {
+        if (this.$refs.bar) {
+          this.$refs.bar.stop()
+        }
+      }, Math.random() * 5000 + 2000)
+    }
+  }
+}
+</script>

src/vue-components/ajax-bar/AjaxBar.vue

@@ -7,20 +7,29 @@
 <script>
 const
   xhr = XMLHttpRequest,
-  send = xhr.prototype.send
+  send = xhr.prototype.send,
+  prefix = ['-webkit-', '-moz-', '-ms-', '-o-']
+
+function prefixed (value) {
+  let o = {transform: value}
+  prefix.forEach(p => {
+    o[p + 'transform'] = value
+  })
+  return o
+}
 
 function translate ({p, pos, active, horiz, reverse}) {
   let x = 1, y = 1
 
   if (horiz) {
     if (reverse) { x = -1 }
     if (pos === 'bottom') { y = -1 }
-    return `translate3d(${x * (p - 100)}%, ${active ? 0 : y * -200}%, 0)`
+    return prefixed(`translate3d(${x * (p - 100)}%, ${active ? 0 : y * -200}%, 0)`)
   }
 
   if (reverse) { y = -1 }
   if (pos === 'right') { x = -1 }
-  return `translate3d(${active ? 0 : x * -200}%, ${y * (p - 100)}%, 0)`
+  return prefixed(`translate3d(${active ? 0 : x * -200}%, ${y * (p - 100)}%, 0)`)
 }
 
 function inc (p, amount) {
@@ -100,16 +109,15 @@ export default {
   },
   computed: {
     containerStyle () {
-      return {
-        [this.sizeProp]: this.size,
-        transform: translate({
-          p: this.progress,
-          pos: this.position,
-          active: this.active,
-          horiz: this.horizontal,
-          reverse: this.reverse
-        })
-      }
+      let o = translate({
+        p: this.progress,
+        pos: this.position,
+        active: this.active,
+        horiz: this.horizontal,
+        reverse: this.reverse
+      })
+      o[this.sizeProp] = this.size
+      return o
     },
     innerStyle () {
       return {background: this.color}