How to override the default Loading animation for CSHTML5

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
TaterJuice
Posts: 86
Joined: Thu Mar 16, 2017 5:40 am

How to override the default Loading animation for CSHTML5

Postby TaterJuice » Fri Sep 08, 2017 9:49 am

How do I override the default loading animation for CSHTML5?

Image

TaterJuice
Posts: 86
Joined: Thu Mar 16, 2017 5:40 am

Re: How to override the default Loading animation for CSHTML5

Postby TaterJuice » Thu Oct 12, 2017 9:14 am

My current workaround is to make a Wrapper CSHTML5 app with no dependencies, and just have it display an animated loading animation while it loads the actual CSHTML5 app and then displays it, once loaded. This still shows the initial loading bar, but only for a moment while it loads the new "loading" animation. Then, the inner CSHTML5 project loads hidden, behind my initial loading animation.

This works, more or less, but I don't think is a permanent solution.
It would be great if the CSHTML5 guys could implement the XAML\WPF Progressbar control, use it to replace the default loading bar with a XAML progressbar, and then allowed users to Style the progressbar in the App.xaml file.

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

Re: How to override the default Loading animation for CSHTML5

Postby JS-Support » Tue Oct 17, 2017 7:15 am

Hi,

At the moment, there are limited built-in options for customizing the Loading animation:

  • You can easily change the appearance of the progress bar (colors, size, etc.) by editing the file "cshtml5.css" that is located in the following folder:

    C:\Program Files (x86)\MSBuild\CSharpXamlForHtml5\InternalStuff\Libraries\

    Here is the relevant portion of the CSS code:

    Code: Select all

    #loadingProgress {
        background-color: #DDDDDD;
        z-index: 9999;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 3px;
        margin-top: -1px; /* set to a negative number 1/2 of your height */
        margin-left: -100px; /* set to a negative number 1/2 of your width */
    }

    #progressBar {
        background-color: #333333;
        margin: 0px;
        padding: 0px;
        height: 3px;
    }

  • Further customization requires more work. The code that handles the progress bar is located in the file "JSIL.Browser.js" that is in the following folder:

    C:\Program Files (x86)\MSBuild\CSharpXamlForHtml5\InternalStuff\Libraries\

    Here is the portion of the code that creates the HTML progress bar:

    Code: Select all

    progressDiv.innerHTML = (
          '  <div id="progressBar"></div>' +
          '  <span id="progressText"></span>'
        );


    And here is the portion of the code that updates the progress bar:

    Code: Select all

    function updateProgressBar (prefix, suffix, bytesLoaded, bytesTotal) {
    ...

Please note that the Loading progress bar is made in JavaScript and HTML because it needs to be displayed immediately. If it was made in C#/XAML, it wouldn't appear immediately because the .net framework needs to be loaded first.

IMPORTANT: When you update to a new version of CSHTML5, the above files are replaced with the original ones, so you will lose any changes. Please be sure to make a backup copy of your changes before upgrading CSHTML5.


Regards,
JS-Support

TaterJuice
Posts: 86
Joined: Thu Mar 16, 2017 5:40 am

Re: How to override the default Loading animation for CSHTML5

Postby TaterJuice » Tue Oct 17, 2017 7:30 am

JS-Support wrote:Hi,

At the moment, there are limited built-in options for customizing the Loading animation:

..........

Here is the portion of the code that creates the HTML progress bar:

Code: Select all

progressDiv.innerHTML = (
      '  <div id="progressBar"></div>' +
      '  <span id="progressText"></span>'
    );



EXCELLENT! Thank you!


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 1 guest