Non gif loading directive using spin.js

directive.js

app.directive('spinner', ['$window', function ($window) {
	return {
		scope: true,
		link: function (scope, element, attr) {
			scope.spinner = null;
			
			function stopSpinner() {
				if (scope.spinner) {
					scope.spinner.stop();
					scope.spinner = null;
				}
			}

			scope.$watch(attr.spinner, function (options) {
				stopSpinner();
				scope.spinner = new $window.Spinner(options);
				scope.spinner.spin(element[0]);
			}, true);
		}
	};
}]);

index.html

<span spinner="{radius:5, width:2, length: 4, color: '#fff'}"></span>