Page 1 of 1

Busy Indicator Spinner

Posted: Fri Sep 02, 2016 1:13 am
by Sesztak
Dear JS-Support,

Anyone who is interested, pls, find below our Busy Indicator Spinner implementation for CSHTML5 based on (pure javascript) code:

Code: Select all

// Class properties:
object csharpObject_targetForBusyIndicator = null; //e.g. <TextBlock Text=" " x:Name="busyIndikator" /> // it will host busy indicator as a parent of spinner child. Note: you should use another XAML control as well (not only TextBlock).
object csharpObjectBusyIndicator = null;
int DelayAfterCallBusySpinner = 50; // e.g. 15 - 100ms, you need it to give some time for spinner to spin-up because of single threaded nature of javascript.

// Initialization somewhere under appropriate method, e.g. at Page_Loaded()
await CSHTML5.Interop.LoadJavaScriptFile("ms-appx:///yourNamespace/javascripts/spin.js"); // create a 'javascripts' folder under your project and add spin.js to it. note: you should use spin.min.js and modify the code accordingly. Download the JS file from
csharpObject_targetForBusyIndicator = CSHTML5.Interop.GetDiv(busyIndikator);

// Start busy indicator -spinning:
            csharpObjectBusyIndicator = CSHTML5.Interop.ExecuteJavaScript(
                @"new Spinner({color:'#000', lines: 10, fps: 20, hwaccel: true}).spin()"); // for full parameter list, check the

                csharpObject_targetForBusyIndicator, csharpObjectBusyIndicator);

// Stop busy indicator:
CSHTML5.Interop.ExecuteJavaScriptAsync(@"$0.stop()", csharpObjectBusyIndicator);

// small but very important note on usage: under async method when you start spinner give some time to spinner to spin up call the following line immediately AFTER busy indicator started:
await Task.Delay(DelayAfterCallBusySpinner); // e.g. 50ms
// it needed if you do something like a WCF server call after starting busy indicator -which is the normal case

I hope it help others,
Best Regards,

Re: Busy Indicator Spinner

Posted: Fri Sep 02, 2016 4:56 am
by JS-Support @Userware
Nice !
Thanks a lot for sharing it!