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