Busy Indicator Spinner

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Busy Indicator Spinner

Postby Sesztak » Fri Sep 02, 2016 1:13 am

Dear JS-Support,

Anyone who is interested, pls, find below our Busy Indicator Spinner implementation for CSHTML5 based on http://spin.js.org/ (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 http://spin.js.org/
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 http://spin.js.org

            CSHTML5.Interop.ExecuteJavaScriptAsync(@"$0.appendChild($1.el)",
                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,
Péter

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Busy Indicator Spinner

Postby JS-Support @Userware » Fri Sep 02, 2016 4:56 am

Nice !
Thanks a lot for sharing it!


Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 2 guests