DevExtreme React - 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 widget size, using the height and width options.
- <template>
- <DxLoadIndicator
- :visible.sync="isLoadIndicatorVisible"
- :height="40"
- :width="40"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- 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 option.
- <template>
- <DxLoadIndicator
- :visible.sync="isLoadIndicatorVisible"
- :indicatorSrc="indicatorUrl"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- 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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- LoadIndicator - Show and Hide Using the API
- LoadIndicator API Reference
- LoadPanel - Overview
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.