AppGini Community Forums

• Without that hack (first video) you can see the form from the beginning on, but you can also see that element are being moved to new places
• Using the hack (second video) you cannot see the form at the beginning, but as soon as you can see it, all layouting has been finished. In the meantime, there is a small loading animation (top left)

<style>
    /* hide detail view from the beginning on */ .detail_view { display: none; }
    /* show spinner */ .page-header:after { content: url('loading.gif'); }
    /* prepare hiding spinner */ .page-header.loaded:after { content: ''; }
</style>
<script>
  // Attention: the next line of code requires AppGini Helper Javascript Libray
  new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>

jsetzer wrote: ↑

2020-03-03 07:57

Hi,

I have managed to center the loader and additionally I have replaced the gif by a different animation:

Final result


OVtZcs0iY1.gif


Loading


65cGaFEMiK.gif


When watching the screenrecording above, please don't wait for the page to load. it is an endless waste of time. It will not load
For demonstration purposes I have just screenrecorded the loader and hidden the form completely.


Updated code

There is only little change required:

Code: Select all

<style>
    /* hide detail view from the beginning on */
    .detail_view { display: none; }

    /* show spinner */
    .page-header:after {
        content: url('loading.gif');         /* <----- you can change the filename here */
    /* content: url('ajax-loader.gif'); */
        position: absolute; top: 200px; left: 50%;
    }


    /* prepare hiding spinner if page has been loaded completely */
    .page-header.loaded:after {
        content: '';
    }
</style>
<script>
    new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>

Custom loaders

You can create your own custom animated loaders for example on this site:
http://www.ajaxload.info/

After you have generated the loader, download it, copy it to the root directory of your application and name it "ajax-loader.gif". Then change the css code in hooks/header-extras.php as you can see in the comments above. You can name the file whatever you like and then you will have to change the filename in the css-code also.

The loader I have been using in the screenshot above has been attached to this post.


Best,
Jan

PS: You can download the loader I am using below

onoehring wrote: ↑

2020-03-10 08:41

The animated image was to large (1 MB), so I uploaded it here: https://dl.olaf-noehring.de/?t=bf458366 ... d0905b6a63

onoehring wrote: ↑

2020-03-10 10:06

yes, it's an animated PNG. My Vivaldi (chromium) displays it correct.
The animated GIF ( https://dl.olaf-noehring.de/?t=cb9697c6 ... a71f7fd863 ) is 5.5 MB

<!-- file: hooks/header-extras.php -->
<script src="hooks/AppGiniHelper.min.js"></script>
<style>
    .detail_view { display: none; } .page-header.loaded:after { content: ''; }
    .page-header:after { content: url('loading.gif'); position: absolute; top: 200px; left: 50%; }
</style>
<script>
    new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
    $j.ajax("ajax_check_login.php"); // this line is new
</script>

• This requires AppGiniHelper Javascript Library
• You can replace loading-gif (line 5) by any other animated gif
• You can create own loaders for example here: http://www.ajaxload.info/