Using javascript loading indicator with UpdatePanel/UpdateProgress?

Question

Is is possible to combine for instance spin.js with an UpdatePanel?

The normal way is to put a gif in an UpdateProgress, but can it be done with a javascript driven spinner/loading indicator instead?

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

<script type="text/javascript">

    window.onload = function () {

        var opts = {

            lines: 14, // The number of lines to draw

            length: 7, // The length of each line

            width: 4, // The line thickness

            radius: 10, // The radius of the inner circle

            color: '#000', // #rgb or #rrggbb

            speed: 1, // Rounds per second

            trail: 60, // Afterglow percentage

            shadow: false // Whether to render a shadow

        };

        var target = document.getElementById('foo');

        var spinner = new Spinner(opts);

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(panelLoaded);

        prm.add_beginRequest(panelUpdateRequest);

        function panelLoaded(sender, args) {

            spinner.stop();

        }

        function panelUpdateRequest(sender, args) {                   

            spinner.spin(target);

        }              

    }           

</script>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

    <ProgressTemplate>

        <div id="foo" style="font-size: large">

        </div>

    </ProgressTemplate>

</asp:UpdateProgress>