To show loading spinner in VBCS

Users can add the following html code in designer to add a loading spinner in vbcs.

On button click they can call component ( #loading-dialog ) and select open method.

Now loading dialog is shown, they do some action and after action is completed, they can call component ( #loading-dialog ) and select close method.

Code for loading dialog

<oj-dialog dialog-title="Loading" id="loading-dialog" cancel-behavior="none" class="">
    <div slot="body">
        <div class="oj-flex oj-sm-justify-content-center">
            <oj-progress-circle size="md" value="-1"></oj-progress-circle>
        </div>
    </div>
    <div slot="footer">
    </div>
</oj-dialog>

View live example in new page – https://khalil232.com/apps/ojet-apps/?ojr=loading-dialog

About the Author

khalil

Hi, I'm Khalil, a passionate front-end developer with over 8 years of experience in web development. I specialize in building interactive, user-friendly websites using technologies like JavaScript, HTML, CSS, and Java.

I've had the opportunity to work on a variety of projects across different industries, helping businesses create modern and responsive web applications.

Outside of coding, I enjoy exploring the latest trends in design and tech, as well as sharing knowledge with others. I'm always looking for new challenges to grow my skills and make a positive impact in the tech community

You may also like these