Angular2 - How to change the size of DevExtreme load indicator in datagrid control

https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDataGrid/

Above is the API reference provided by the Devextreme team. I have used the loadPanel property to change the spinner indicator to point to a custom gif. Here is the property exposed by the Devextreme team

loadPanel: {
enabled: "auto",
height: 90,
indicatorSrc: "",
showIndicator: true,
showPane: true,
text: "Loading...",
width: 200
}


which I have changed to something like,

loadPanel: {
enabled: "auto",
height: 90,
indicatorSrc: "images/MyCustom.gif",
showIndicator: true,
showPane: false,
text: "Loading...",
width: 200
}


However, the GIF appears shrunk and the height and width properties are only for the size of the box pane around it. Tried to change the size by setting a CSS style for the indicator class but didn't work

/deep/ .dx-loadindicator-content {
width: 200px;
height: 200px;
}


Could anyone achieve this?

Continue reading...