CODEWITHSUNDEEP
angularjsanimationangular-material
Bhushan Goel
Bhushan Goel

Reputation: 2144

md-circular-progress is not animating

I'm using angular material design circular progress, but it is not animating

Angular module declaration

var app = angular.module('abc', ['ngRoute', 'ngProgress', 'ngAnimate', 'ngAria', 'ngMaterial']);

usage of md circular progress

<md-progress-circular md-mode="indeterminate"></md-progress-circular>

but it is not animating, I have also included all files into my html and using v 1.3.0

when I inspected the element I found that 

animation: sporadic-rotate 5.25s cubic-bezier(.35,0,.25,1) infinite;

is not applied on md-inner element.

Can you tell me that what is wrong here.

angular material design version 0.10.0

Upvotes: 0

Views: 752

Answers (1)

Nate Stone
Nate Stone

Reputation: 531

I had this same error and it was caused by a version mismatch between the Angular Material CSS and the Angular Material JS file.

Example (BAD):

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.css">
<script data-require="[email protected]" data-semver="0.11.4" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>

Notice that the versions are different on the require lines. I had forgotten to update the JS when I updated the CSS require.

Fixed:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

Note the matching versions.

Reference for setting up Angular Material https://material.angularjs.org/latest/getting-started

Upvotes: 2

Related Questions