All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery LoadPanel - Customize the Loading Indicator

If you need to use a 3rd-party loading indicator inside the LoadPanel, assign its URL to the indicatorSrc property.

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" 
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible"
    [indicatorSrc]="indicatorUrl">
</dx-load-panel>
<dx-button
    text="Show the Load Panel"
    (onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible: boolean = false;
    indicatorUrl: string = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg";
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :close-on-outside-click="true"
            v-model:visible="isLoadPanelVisible"
            :indicator-src="indicatorUrl"
        />
        <DxButton
            text="Show the Load Panel"
            @click="handleClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxLoadPanel } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxLoadPanel,
        DxButton
    },
    data() {
        return {
            indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg",
            isLoadPanelVisible: false
        }
    },
    methods: {
        handleClick() {
            this.isLoadPanelVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { LoadPanel } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';

const indicatorUrl = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg";

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoadPanelVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleHide = this.handleHide.bind(this);
    }

    handleClick() {
        this.setState({
            isLoadPanelVisible: true
        });
    }

    handleHide() {
        this.setState({
            isLoadPanelVisible: false
        });
    }

    render() {
        return (
            <div>
                <LoadPanel
                    closeOnOutsideClick={true}
                    indicatorSrc={indicatorUrl}
                    visible={this.state.isLoadPanelVisible}
                    onHidden={this.handleHide}
                />
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;

In case you do not need any loading indicator to be shown at all, assign false to the showIndicator property.

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        showIndicator: false
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible"
    [showIndicator]="false">
</dx-load-panel>
<dx-button
    text="Show the Load Panel"
    (onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible: boolean = false;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :close-on-outside-click="true"
            v-model:visible="isLoadPanelVisible"
            :show-indicator="false"
        />
        <DxButton
            text="Show the Load Panel"
            @click="handleClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxLoadPanel } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxLoadPanel,
        DxButton
    },
    data() {
        return {
            isLoadPanelVisible: false
        }
    },
    methods: {
        handleClick() {
            this.isLoadPanelVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { LoadPanel } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoadPanelVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleHide = this.handleHide.bind(this);
    }

    handleClick() {
        this.setState({
            isLoadPanelVisible: true
        });
    }

    handleHide() {
        this.setState({
            isLoadPanelVisible: false
        });
    }

    render() {
        return (
            <div>
                <LoadPanel
                    closeOnOutsideClick={true}
                    showIndicator={false}
                    visible={this.state.isLoadPanelVisible}
                    onHidden={this.handleHide}
                />
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;
See Also