Page 1 of 1

How to override the default Loading animation for CSHTML5

Posted: Fri Sep 08, 2017 9:49 am
by TaterJuice
How do I override the default loading animation for CSHTML5?

Image

Re: How to override the default Loading animation for CSHTML5

Posted: Thu Oct 12, 2017 9:14 am
by TaterJuice
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.

Re: How to override the default Loading animation for CSHTML5

Posted: Tue Oct 17, 2017 7:15 am
by JS-Support @Userware
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

Re: How to override the default Loading animation for CSHTML5

Posted: Tue Oct 17, 2017 7:30 am
by TaterJuice
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!