JavaScript/jQuery LoadPanel - Customize the Loading Indicator
To use a custom load indicator image, set indicatorOptions.src to the image URL.
jQuery
index.js
$(function() {
$("#loadPanelContainer").dxLoadPanel({
hideOnOutsideClick: true,
indicatorOptions: {
src: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
}
});
});Angular
app.component.html
app.component.ts
<dx-load-panel
[hideOnOutsideClick]="true"
[indicatorOptions]="indicatorOptions">
</dx-load-panel>
import type { DxLoadPanelTypes } from 'devextreme-angular/ui/load-panel';
// ...
export class AppComponent {
indicatorOptions: DxLoadPanelTypes.LoadPanelIndicatorProperties = {
src: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
};
}Vue
App.vue
<template>
<DxLoadPanel
:hide-on-outside-click="true"
:indicator-options="indicatorOptions"
/>
</template>
<script setup lang="ts">
import DxLoadPanel from 'devextreme-vue/load-panel';
import { type DxLoadPanelTypes } from "devextreme-vue/load-panel";
const indicatorOptions: DxLoadPanelTypes.LoadPanelIndicatorProperties = {
src: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
};
</script>React
App.tsx
import React from 'react';
import LoadPanel, { type LoadPanelTypes } from 'devextreme-react/load-panel';
const indicatorOptions: LoadPanelTypes.LoadPanelIndicatorProperties = {
src: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
};
function App() {
return (
<LoadPanel
hideOnOutsideClick={true}
indicatorOptions={indicatorOptions}
/>
);
}
export default App;To hide a load indicator, disable the showIndicator property.
jQuery
index.js
$(function() {
$("#loadPanelContainer").dxLoadPanel({
hideOnOutsideClick: true,
showIndicator: false
});
});Angular
app.component.html
<dx-load-panel
[hideOnOutsideClick]="true"
[showIndicator]="false">
</dx-load-panel>Vue
App.vue
<template>
<DxLoadPanel
:hide-on-outside-click="true"
:show-indicator="false"
/>
</template>
<script setup lang="ts">
import DxLoadPanel from 'devextreme-vue/load-panel';
</script>React
App.tsx
import React from 'react';
import { LoadPanel } from 'devextreme-react/load-panel';
function App() {
return (
<LoadPanel
hideOnOutsideClick={true}
showIndicator={false}
/>
);
}
export default App;See Also
Select one or more answers