Yii loading gif before controller action

Yii 2.0 General Discussions
1

Hello all,

Is there a possibility to show a loading gif before controller takes over the action and execute the queries from model? Because i have a big table and it tooks the model about 5-6 sec to return the results passed to the view by the controller.

I use mod_rewrite and i have a simple ‘a’ tag which redirects me to the new action. Something like this:

<a href="<?php echo Yii::app()->request->baseUrl; ?>/userstatistics.html">User statistics</a>

I would like to show the loading gif when the user clicks on that link and disappear after the specific view is rendered. Same thing would need when user reloads ‘User statistics’ page.

Is this possible only using AJAX calls or can i make something in YII? A loading view that renders before actions or something.

Thank you

2

You can insert this HTML block in your layout :




<!-- When the page is loaded, the loader becomes hidden -->

<body onload="$('#loader').hide();">

<div id="loader"><img src="<?= Url::to('@web/images/loading.gif') ?>" alt="Loading"/></div>


...


<?php $this->endBody() ?>

<script type="text/javascript">

  $(document).ready(function(){

    //When clicking on a button, it shows the loader

    $('.btn-loading').on('click', function(){

      $('#loader').show();

    });

  });

</script>

</body>

And add a class "btn-loading" on the buttons that you want to show the loader when clicking on it.

The CSS for the loader :




#loader

{

    position:fixed;

    width:100%;height:100%;

    z-index:999;

    background-color:#2494F2;

}

#loader img

{

    display:block;

    position:absolute;

    top:50%;left:50%;

}

And no AJAX needed ;)

3

Hello, thank you for your answer. It is working when i click the buttons with the specified class. The only way it is not showing if you refresh the page. For that i put a beforeunload event that seems to do the work.

Thank you!