32
Views
3
Comments
How to put a loader in download action in traditional Web
Application Type
Traditional Web

I having a download button with a Submit method, i need to show loader when clicking that button and loader should be hidden after a file is downloaded.

please suggest any ideas to implement this



Thanks,

vishnu shankar

You can do this by using container and that CSS applied to it to show spinner or loader (give container class property name of your CSS class) then you can control showing and hiding this container into download action (to show container as first step into download action and hide it as last step of download action and also hide it into exception handling ).

You can try this CSS for example or search for CSS loader or spinner and you will get more examples:

.loader {

    width: 48px;

    height: 48px;

    border: 5px solid #FFF;

    border-bottom-color: #FF3D00;

    border-radius: 50%;

    display: inline-block;

    box-sizing: border-box;

    animation: rotation 1s linear infinite;

    }


    @keyframes rotation {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

    } 

@Mostafa Othman 

Thanks for replying,

showing and hiding a loader is not a problem, the problem is how to do that in the submit action with the download widget. Because normally a Action with the submit method and with the download widget we can't able to work with RunjavaScript, Widget_Click, Ajax refresh inside that action. Except this how to implement ?

Hello Vishnu,

Kindly find attached oml which contains sample of what you want to implement.

I used a download button (Visible) which using AjexSubmit and show loader container using AjexRefresh then used Widget_Click to click download button (invisible) which using Submit and download file after finishing download exception will return back to first button with AjexSubmit to hide loader.

TestLoading.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.