Vue LoadIndicator - Overview
The LoadIndicator is a UI element notifying the viewer that a process is in progress.
The following code adds a simple LoadIndicator to your page. You can change the UI component size, using the height and width properties.
- <template>
- <DxLoadIndicator
- v-model:visible="isLoadIndicatorVisible"
- :height="40"
- :width="40"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
- export default {
- components: {
- DxLoadIndicator
- },
- data() {
- return {
- isLoadIndicatorVisible: true
- };
- }
- }
- </script>
If you need to use a custom image in the LoadIndicator, assign its URL to the indicatorSrc property.
- <template>
- <DxLoadIndicator
- v-model:visible="isLoadIndicatorVisible"
- :indicatorSrc="indicatorUrl"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
- export default {
- components: {
- DxLoadIndicator
- },
- data() {
- return {
- isLoadIndicatorVisible: true,
- indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
- };
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.