Is it possible to animate a readonly q-knob on load?

[BenJackGill]

I have a q-knob that looks like this:

      <q-knob
        v-model="websiteScore"
        readonly
        show-value
        size="90px"
        :thickness="0.22"
        color="primary"
        track-color="grey-3"
        class="text-primary q-ma-md"
      />

I am using it to display a website score. So it is readonly at the moment. But it would be cool if I could make the dial animate on load.

Is that possible?

[pdanpdan]

https://codepen.io/pdanpdan/pen/ZEoNGEe?editors=1010

[BenJackGill]

Great idea!

For anyone else coming afterwards, the trick was to set the initial ref model value to 0 and then use onMounted with setTimeout to update the value a little bit after page load.

See the codepen for full implementation.