quasar/src/components/spinner/QSpinnerBars.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { h } from 'vue'

import useSpinner, { useSpinnerProps } from './use-spinner.js'

import { createComponent } from '../../utils/private/create.js'

const svg = [
  h('rect', {
    y: '10',
    width: '15',
    height: '120',
    rx: '6'
  }, [
    h('animate', {
      attributeName: 'height',
      begin: '0.5s',
      dur: '1s',
      values: '120;110;100;90;80;70;60;50;40;140;120',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    }),
    h('animate', {
      attributeName: 'y',
      begin: '0.5s',
      dur: '1s',
      values: '10;15;20;25;30;35;40;45;50;0;10',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    })
  ]),
  h('rect', {
    x: '30',
    y: '10',
    width: '15',
    height: '120',
    rx: '6'
  }, [
    h('animate', {
      attributeName: 'height',
      begin: '0.25s',
      dur: '1s',
      values: '120;110;100;90;80;70;60;50;40;140;120',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    }),
    h('animate', {
      attributeName: 'y',
      begin: '0.25s',
      dur: '1s',
      values: '10;15;20;25;30;35;40;45;50;0;10',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    })
  ]),
  h('rect', {
    x: '60',
    width: '15',
    height: '140',
    rx: '6'
  }, [
    h('animate', {
      attributeName: 'height',
      begin: '0s',
      dur: '1s',
      values: '120;110;100;90;80;70;60;50;40;140;120',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    }),
    h('animate', {
      attributeName: 'y',
      begin: '0s',
      dur: '1s',
      values: '10;15;20;25;30;35;40;45;50;0;10',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    })
  ]),
  h('rect', {
    x: '90',
    y: '10',
    width: '15',
    height: '120',
    rx: '6'
  }, [
    h('animate', {
      attributeName: 'height',
      begin: '0.25s',
      dur: '1s',
      values: '120;110;100;90;80;70;60;50;40;140;120',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    }),
    h('animate', {
      attributeName: 'y',
      begin: '0.25s',
      dur: '1s',
      values: '10;15;20;25;30;35;40;45;50;0;10',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    })
  ]),
  h('rect', {
    x: '120',
    y: '10',
    width: '15',
    height: '120',
    rx: '6'
  }, [
    h('animate', {
      attributeName: 'height',
      begin: '0.5s',
      dur: '1s',
      values: '120;110;100;90;80;70;60;50;40;140;120',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    }),
    h('animate', {
      attributeName: 'y',
      begin: '0.5s',
      dur: '1s',
      values: '10;15;20;25;30;35;40;45;50;0;10',
      calcMode: 'linear',
      repeatCount: 'indefinite'
    })
  ])
]

export default createComponent({
  name: 'QSpinnerBars',

  props: useSpinnerProps,

  setup (props) {
    const { cSize, classes } = useSpinner(props)

    return () => h('svg', {
      class: classes.value,
      fill: 'currentColor',
      width: cSize.value,
      height: cSize.value,
      viewBox: '0 0 135 140',
      xmlns: 'http://www.w3.org/2000/svg'
    }, svg)
  }
})