CSS animation 冻结

Question

Waiting for my angular app to load all the content needed via ajax, I show a loader on a darker layer, which is over the content.

I am using this SVG which includes an animateTransform :

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></path><circle fill="#fff" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></circle></g></g></svg>

The ajax calls are 4 and at some point the loader freezes and the animation is starting again once the calls are done.

This is the angular part:

<script type="text/javascript">
var myApp = angular
    .module('appName', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    }
    .service('dataService', function($http) {
        function getInfos() {
            return $http.get(currentUrl + '/infos');
        }
        function getCountries() {
            return $http.get(currentUrl + '/countries');
        }
        function getCatgeories() {
            return $http.get(currentUrl + '/categories');
        }
        function getPrices() {
            return $http.get(currentUrl + '/prices');
        }
        return {
            getInfos: getInfos,
            getCountries: getCountries,
            getCatgeories: getCatgeories,
            getPrices: getPrices
        };
    })
    .controller('appNameController', function($scope, dataService) {
        $scope._loading = {
            start: function() {
                if($('.loader').hasClass('off')){
                    $('.loader').removeClass('off');
                }
            },
            stop: function() {
                if(!$('.loader').hasClass('off')){
                    $('.loader').addClass('off');
                }
            }
        };
        $scope._loading.start();
        $scope.checkPageLoader = function() {
            if($scope.hidePageLoader == 4) {
                    $('#loaderText').html('<span>App is Ready!</span>');
                    $scope._loading.stop();
            }
        };
        $scope.hidePageLoader = 0;
        $scope.getInfos = function() {
            dataService.getInfos().then(function(res) {
                $scope.infos = res.data;
                $scope.hidePageLoader += 1;
                $('#loaderText').append('<span><i class="icon-check"></i>Infos</span>');
                $scope.checkPageLoader();
            });
        };
        dataService.getCatgeories().then(function(res) {
            $scope.categories = res.data;
            $scope.hidePageLoader += 1;
            $('#loaderText').append('<span><i class="icon-check"></i>Categories</span>');
            $scope.checkPageLoader();
        });
        dataService.getPrices().then(function(res) {
            $scope.prices = res.data;
            $scope.hidePageLoader += 1;
            $('#loaderText').append('<span><i class="icon-check"></i>Prices</span>');
            $scope.checkPageLoader();
        });
        $scope.getCountries = function() {
            dataService.getCountries().then(function(res) {
                $scope.countries = res.data;
                $scope.hidePageLoader += 1;
                $('#loaderText').append('<span><i class="icon-check"></i>Countries</span>');
                $scope.checkPageLoader();
            });
        };
        angular.element(document).ready(function () {
            $scope._loading.start();
            $scope.getInfos();
            $scope.getCountries();
            /* $scope.priceValues(); */
        });
    });
</script>

Any idea why this is happening?

Answer 1

Your code is incorrect: priceValues doesn't exist

Try to wait all promises with $q.all :

.controller('appNameController', function($scope, $q, dataService) {
    $scope._loading = {
        start: function() {
            if($('.loader').hasClass('off')){
                $('.loader').removeClass('off');
            }
        },
        stop: function() {
            if(!$('.loader').hasClass('off')){
                $('.loader').addClass('off');
            }
        }
    };
    $scope.getInfos = function() {
        return dataService.getInfos().then(function(res) {
            $scope.infos = res.data;
        });
    };
    $scope.getCatgeories= function() {
        return dataService.getCatgeories().then(function(res) {
            $scope.categories = res.data;
        });
    };
    $scope.getPrices= function() {
        return dataService.getPrices().then(function(res) {
            $scope.prices = res.data;
        });
    };
    $scope.getCountries = function() {
        return dataService.getCountries().then(function(res) {
            $scope.countries = res.data;
        });
    };
    $scope._loading.start();
    $q.all([
        $scope.getInfos(),
        $scope.getPrices(),
        $scope.getCountries()
    ]).then(function() {
        $('#loaderText').html('<span>App is Ready!</span>');
        $scope._loading.stop();
    });
});

Answer 2

I ended up moving from the embedded animation of the SVG to a CSS animation, always on the SVG.

The SVG code now is:

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"></path><circle fill="#fff" cx="36" cy="18" r="1"></circle></g></g></svg>

and this is the CSS code that replicate the embedded animation ( animateTransform ):

#pageLoader {
    animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

This way the animation is smooth and it does not freeze during ajax calls.

Hope this will help someone.