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