This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 2 years, 6 months ago.

AngularJS how to show loading animation when using ajax

  • benck

    Member Reply #8586

    I’m using AngularJS version of admin 4 but I found the portlet ajax sample code in the above link. I’m now loading ajax content through my controller and want to update the portlet already built.

    How could I make the loading animation in view by code (jQuery?) and terminate the animation once the ajax loads. Thank you!

    The code should look like this:








    MetronicApp.controller(‘ListController’, function($rootScope, $scope, $http, $timeout, $log, $resource) {


    $scope.api = $resource(‘/ajax/ajax.php’, {action: ‘get_all_accounts’});


    // start animation here

    // $(…).startAnimation()??


    $scope.doSearch = function(){

    $scope.api.get({}, function(result){

    // end animation here

    // $(….).endAnimation()???


    // work around with the result returned





    <div class=”portlet light bordered”>

    <div class=”portlet-title”>

    <div class=”caption font-green-sharp”>

    <span class=”caption-subject bold uppercase”>Create Something</span>


    <div class=”tools”>



    <div class=”portlet-body”>

    …. some body here to be ajax loaded





    Posts: 4527
    Support Staff Reply #8599

    Hi :),

    You can use below code to show and hide a loading bar for a content:

    Show loading:
    target: ‘#your_portlet_body’ // ID of your portlet body part

    Hide loading

    More examples you can find here:

    If you need any further help please let us know.



You must be logged in to reply to this topic.