Vue UI Components Documentation

Sets or gets whether the loader will be shown after it's creation.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets the loader's height.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :height="200"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets the loader's content.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :html="'custom HTML string'"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets whether the loader is displayed as a modal dialog. If the jqxLoader's mode is set to modal, the loader blocks user interaction with the underlying user interface.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :isModal="true"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets the image's position. Possible values: 'top', 'bottom' and 'center'

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :imagePosition="'top'"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets a value indicating whether widget's text is aligned to support locales using right-to-left fonts.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :rtl="true"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets the loader's text.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :text="'Loading files...'"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets the alignment.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :textPosition="'left'"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
                                                                                          
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :theme="'material'"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Sets or gets the jqxLoader's width.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true" :width="200"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    }
  }
</script>

Closing the current loader.

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    },
    mounted: function () {
      this.$refs.myLoader.close();
    }
  }
</script>

Opening/showing the current loader. You can optionally call the method with left and top arguments

<template>
  <JqxLoader ref="myLoader"
    :autoOpen="true"
  />
</template>
 
<script>
  import JqxLoader from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxloader.vue';
 
  export default {
    components: {
      JqxLoader
    },
    mounted: function () {
      this.$refs.myLoader.open(200,50);
    }
  }
</script>