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?

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>