angular-spinner

angular-spinner

使用 spin.js 显示动画旋转器的 Angular 指令 Copyright (C) 2013, 2014, 2015, 2016, 2017 Uri Shaked, Islam Attrash 和贡献者

使用方法

获取 angular-spinner

• 通过 npm: 运行

$ npm install angular-spinner 从控制台

• 通过 bower: 通过运行

$ bower install angular-spinner 从控制台 将 angular-spinner.js 添加到您的应用程序中。

import 'angular-spinner';

OR:

require('angular-spinner');

或者选择以下文件之一(取决于包管理器):

将 angularSpinner 模块添加为您应用模块的依赖:

var myapp = angular.module('myapp', ['angularSpinner']);

现在,您可以开始使用 us-spinner 指令来显示动画 例如：

您还可以传递旋转器选项,例如:

可能的配置选项在 spin.js 主页 中进行了说明。 您可以根据范围表达式指导旋转器开始和停止,例如:

配置默认旋转器选项

您可以使用 usSpinnerConfigProvider 为全局所有旋转器配置默认选项。从指令传递的任何选项仍会覆盖这些选项。

myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
    usSpinnerConfigProvider.setDefaults({color: 'blue'});
}]);

主题

主题为旋转控件提供了命名的默认选项。从指令传递的任何选项仍然会覆盖这些选项。

myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
    usSpinnerConfigProvider.setTheme('bigBlue', {color: 'blue', radius: 20});
    usSpinnerConfigProvider.setTheme('smallRed', {color: 'red', radius: 6});
}]);

使用 usSpinnerService 控制旋转图标

Start spinner
Stop spinner

usSpinnerService 服务允许您通过键控制旋转的启动和停止。无论键是否指定，所有旋转器都将受到影响（启动/停止所有旋转器）：