Custome Spinner



  • How can i add a custome spinner using gif or apng?
    Please help



  • Currently, it isn’t possible.

    Scott



  • After digging on the codes a was able to create my own spinner

    create this file and use it like a custom component

    //src\components\LogoSpinner.js
    
    import Vue from "vue";
    
    import mixin from "quasar/src/components/spinner/spinner-mixin.js";
    
    export default Vue.extend({
      name: "LogoSpinner",
    
      mixins: [mixin],
    
      render(h) {
        return h(
          "svg",
          {
            staticClass: "q-spinner",
            class: this.classes,
            on: this.$listeners,
            attrs: {
              stroke: "currentColor",
              width: this.cSize,
              height: this.cSize,
              viewBox: "0 0 57 57",
              xmlns: "http://www.w3.org/2000/svg"
            }
          },
          [
            h(
              "g",
              {
                attrs: {
                  transform: "translate(1 1)",
                  "stroke-width": "2",
                  fill: "none",
                  "fill-rule": "evenodd"
                }
              },
              [
                h(
                  "circle",
                  {
                    attrs: {
                      cx: "5",
                      cy: "50",
                      r: "5"
                    }
                  },
                  [
                    h("animate", {
                      attrs: {
                        attributeName: "cy",
                        begin: "0s",
                        dur: "2.2s",
                        values: "50;5;50;50",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    }),
                    h("animate", {
                      attrs: {
                        attributeName: "cx",
                        begin: "0s",
                        dur: "2.2s",
                        values: "5;27;49;5",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    })
                  ]
                ),
                h(
                  "circle",
                  {
                    attrs: {
                      cx: "27",
                      cy: "5",
                      r: "5"
                    }
                  },
                  [
                    h("animate", {
                      attrs: {
                        attributeName: "cy",
                        begin: "0s",
                        dur: "2.2s",
                        from: "5",
                        to: "5",
                        values: "5;50;50;5",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    }),
                    h("animate", {
                      attrs: {
                        attributeName: "cx",
                        begin: "0s",
                        dur: "2.2s",
                        from: "27",
                        to: "27",
                        values: "27;49;5;27",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    })
                  ]
                ),
                h(
                  "circle",
                  {
                    attrs: {
                      cx: "49",
                      cy: "50",
                      r: "5"
                    }
                  },
                  [
                    h("animate", {
                      attrs: {
                        attributeName: "cy",
                        begin: "0s",
                        dur: "2.2s",
                        values: "50;50;5;50",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    }),
                    h("animate", {
                      attrs: {
                        attributeName: "cx",
                        from: "49",
                        to: "49",
                        begin: "0s",
                        dur: "2.2s",
                        values: "49;5;27;49",
                        calcMode: "linear",
                        repeatCount: "indefinite"
                      }
                    })
                  ]
                )
              ]
            )
          ]
        );
      }
    });
    

Log in to reply