CSS animation stalling

While my angular app is loading all the necessary content through ajax, I display a loader on top of the content on a darker layer.

The SVG used in this process contains 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>

There are a total of 4 ajax calls, and sometimes the loader freezes before the animation restarts once all the calls are completed.

Here is the relevant Angular code snippet:

<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>

Can anyone provide insight into why this issue is occurring?

Answer №1

I made the switch from using an embedded SVG animation to utilizing a CSS animation that now runs directly on the SVG.

Here is the updated SVG code:

<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>

Additionally, I have included the CSS code below to replicate the original embedded animation using animateTransform:

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

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

This adjustment ensures a seamless animation experience without any freezing issues during ajax calls.

Hoping this solution proves beneficial to others as well.

Answer №2

Looks like there is an issue in your code: priceValues is not defined

Consider resolving all promises using $q.all:

.controller('newAppNameController', function($scope, $q, dataService) {
    $scope.loading = {
        start: function() {
            if($('.loading-icon').hasClass('hidden')){
                $('.loading-icon').removeClass('hidden');
            }
        },
        stop: function() {
            if(!$('.loading-icon').hasClass('hidden')){
                $('.loading-icon').addClass('hidden');
            }
        }
    };
    $scope.fetchData1 = function() {
        return dataService.fetchData1().then(function(res) {
            $scope.data1 = res.data;
        });
    };
    $scope.fetchData2 = function() {
        return dataService.fetchData2().then(function(res) {
            $scope.data2 = res.data;
        });
    };
    $scope.fetchData3 = function() {
        return dataService.fetchData3().then(function(res) {
            $scope.data3 = res.data;
        });
    };
    $scope.fetchData4 = function() {
        return dataService.fetchData4().then(function(res) {
            $scope.data4 = res.data;
        });
    };
    $scope.loading.start();
    $q.all([
        $scope.fetchData1(),
        $scope.fetchData2(),
        $scope.fetchData3(),
        $scope.fetchData4()
    ]).then(function() {
        $('#loadingMessage').html('<span>Data Loaded Successfully!</span>');
        $scope.loading.stop();
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript: Determine when a property should be included depending on the value of another property

Having some difficulty with Typescript and React. Specifically, I am trying to enforce a type requirement for the interface Car where the property colorId is only required if the carColor is set to 'blue'. Otherwise, it should not be included in ...

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

What is the process for generating a tree structure from an HTML element?

This particular element is found within my Vue2 application: <div class="child-elements-container draggable-container"> <div> <div entity-type="entitytype1" type="elementType" id="2" class= ...

What is the process for linking my website hosted on an external server to the database running on XAMPP on my local machine?

Currently, I have been working on a project website using XAMPP. The site includes a database where users can register and store their information. Initially, my plan was to test the website with friends by physically giving them my laptop. Unfortunately, ...

The process of Single Sign-On (SSO) - a comprehensive look into its

Looking to integrate Single Sign-On (SSO) into all future php/angular applications. Aware of services like Auth0 and oauth.io that act as intermediaries for SSO apps, along with OAuth 1.0/2.0 protocols. Unclear on the complete process flow for creating a c ...

Issue with Mongoose not triggering callback

This particular function is the one that we are discussing function matches_password(password) { var modified = false; var matched = false; User.count({password : password}, function (err, result) { modified = true; console.log('hey& ...

What is the best way to adjust the size of an image within a block layout using either JavaScript or React?

I have a game to create, and I need a block of elements to be aligned like the image below. However, the kangaroo image is not displaying correctly. The actual size of the image is width:70px and height:100px. But I want to resize it to width: 49px and h ...

Is there a way for me to have a background image behave like an img element with img-fluid class as shown in the

Showing 2 rows The issue lies with the first row, as it is not displaying properly and does not resize responsively like the second row. I have tried everything but nothing seems to work. I am attempting to do this because the text and elements in the ...

Components will be displayed without any gaps on smaller screens

I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...

Adding JSON information into a .js file using ajax technology

I am currently working on integrating a calendar template into my system. In the demo JavaScript file, example events are structured like this: events: [ { id: 1, title: 'Title 1', start: ('2016-01-02'), ...

Determining when all textures have successfully loaded in Three.js and ensuring there are no lingering black rectangles

I'm currently developing a web platform that allows users to customize and preview 3D house models. If the user's browser doesn't support WebGL, the server renders the house and sends screenshots to the client. However, if the screenshots ar ...

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

Converting an ajax request to CORS

Would appreciate some guidance on accessing an API through my localhost using the code below: $.ajax({ url: "http://domain.xxx.net/api/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a3b8bcb2b9a4f9bda4b8b9e8b2ba ...

How can I create a redirect link in HTML that opens in a new window

I have a HTML page where I need to redirect to the next page. <a href="www.facebook.com" target="_blank">www.facebbok.com</a> Currently, it is redirecting to localhost:9000/dashboard/www.facebook.com But I only want to redirect to www.facebo ...

What is the best way to incorporate user input and output functionality in a React Javascript application with Material UI for a seamless display?

I am trying to achieve a similar output as shown in this code http://jsfiddle.net/6vqd4vnq/ but using material ui/reactjs. Is there something missing in my setup that is preventing the content from being displayed correctly like in the provided link whic ...

Steps for inserting a script tag in an Angular component

My Angular/Typescript website needs to integrate a third-party script that generates a table. However, I'm facing issues with rendering the table within the home.component.html file. I've managed to embed the script, but it doesn't seem to ...

There was an error that was not properly handled: The property 'Minus' cannot be read because it is undefined

I tried uninstalling and reinstalling NPM using the command npm install but encountered an error afterwards. I also attempted npm audit fix --force which resulted in the following error: An unhandled exception occurred: Cannot read property 'Minus&a ...

Transmit JSON data from the client to the MarkLogic Server device

Hello everyone, hope you are all doing well. I am a beginner in Marklogic and recently managed to set up a rest api on my local machine. Following the given example, I used curl to send/create documents in the database. Now, my query is how can I access/ ...

extract the content of CSS pseudo-elements using Python or Selenium

Currently, I am working on automating a web service using Selenium and Python. My ultimate goal is to extract the text "test" located below. However, I am facing some challenges in figuring out if this is feasible through Selenium or any Python library. & ...

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update

Our team decided to utilize the tool at for assessing the speed of our website. This tool has been effective in analyzing our site's URLs for some time now. However, recently we have encountered an issue where we receive the following error message: ...