How to hide default Spinner and show progress bar in Image Editor?
This article provides instructions on displaying a progress bar instead of the default spinner in the Image Editor. The spinner is typically displayed while the image is being loaded or saved. To accomplish this, follow the steps outlined below:
- Begin by initializing a circular progress bar element and rendering the progress bar component.
- When loading an image, hide the default spinner and update the progress bar during the "created" event.
- After the image is displayed, hide the progress bar by utilizing the "fileOpened" event.
- When saving an image, hide the default spinner and update the progress bar in the "beforeSave" event.
- Finally, hide the progress bar after the image is successfully saved by utilizing the "saved" event.
HTML<div class ="col-lg-12 control-section e-img-editor-sample">
<div id='progress-bar' style="position: absolute; z-index: 1; left: calc(50% - 80px); top: calc(50% - 80px);">
<div id="circular-container"></div>
</div>
<div id="imageeditor" class="row"></div>
</div>
TS<div class ="col-lg-12 control-section e-img-editor-sample">
<div id='progress-bar' style="position: absolute; z-index: 1; left: calc(50% - 80px); top: calc(50% - 80px);">
<div id="circular-container"></div>
</div>
<div id="imageeditor" class="row"></div>
</div>
let circluar: ProgressBar = new ProgressBar({
type: 'Circular', value: 20, width: '80px', height: '80px', isIndeterminate: true, animation: { enable: true, duration: 2000, delay: 0
});
circluar.appendTo('#circular-container');
circluar.element.style.display = 'none';
let imageEditorObj: ImageEditor = new ImageEditor({
created: () => {
hideSpinner(imageEditorObj.element);
circluar.element.style.display = 'block';
circluar.refresh();
},
fileOpened: () => {
// Hide Progress Bar
circluar.element.style.display = 'none';
},
beforeSave: () => {
// Show Progress Bar
circluar.element.style.display = 'block';
circluar.refresh();
},
saved: () => {
// Hide Progress Bar
circluar.element.style.display = 'none';
setTimeout(function() {
circluar.element.style.display = 'none';
}, 2000);
}
});
Refer to the working sample for additional details and implementation: Sample
