材料化圆形进度条上传按钮

Angular | material circular progress fab button

angular, button

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 1932
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

angular.module('BlankApp', ['ngMaterial'])

.controller('AppCtrl', function($scope, $interval) {
    var that = this;

that.reset = (function fn() {
        that.value = 0;
        $interval(function() {
            that.value++;
        }, 50, 100);
        return fn;
    })();

})

.component("mdFabProgress", {
    template: "<md-button class='md-fab' ng-click='$ctrl.onClick()' ng-class=\"{'is-done': $ctrl.done}\"><md-icon class=\"icon\">{{$ctrl.icon}}</md-icon><md-icon class=\"icon-done\">{{$ctrl.iconDone}}</md-icon></md-button><md-progress-circular ng-class=\"{'is-active': $ctrl.active}\" value='{{$ctrl.value}}' md-mode='determinate' md-diameter='68'></md-progress-circular>",
    bindings: {
        "icon": "<",
        "iconDone": "<",
        "value": "<",
        "doAction": "&"
    },
    controller: function($scope) {

var that = this;

that.active = false;
        that.done = false;

that.onClick = function() {
            if (!that.active) {
                that.doAction();
            }
        }

$scope.$watch(function() {
            return that.value
        }, function(newValue) {

if (newValue >= 100) {
                that.done = true;
                that.active = false;
            } else if (newValue == 0) {
                that.done = false;
                that.active = false;
            } else if (!that.active) {
                that.active = true;
            }
        });
    }
});

编译

CSS

md-fab-progress {
    position: relative;
    display: inline-block;
}
md-fab-progress .md-button.md-fab {
    margin: 6px;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear;
}
md-fab-progress .md-button.md-fab .icon-done {
    display: none;
}
md-fab-progress .md-button.md-fab.is-done {
    background: green;
}
md-fab-progress .md-button.md-fab.is-done .icon {
    display: none;
}
md-fab-progress .md-button.md-fab.is-done .icon-done {
    display: block;
}
md-fab-progress md-progress-circular {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 250ms linear;
    transition: opacity 250ms linear;
}
md-fab-progress md-progress-circular.is-active {
    opacity: 1;
}
body {
    background: -webkit-linear-gradient(315deg, #121721 0%, #000000 100%) fixed;
    background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed;
    color: #FFF;
    font: 300 16px/1.5 "Open Sans", sans-serif;
}
.stage {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
md-icon {
    color: #fff;
}

HTML

Angular | material circular progress fab button

angular, button

编辑器支持Emmet

快捷键

Angular | material circular progress fab button

angular, button

css 3d圆台形状加载按钮（带进度动画）

一款很棒的材料化设计中的行动按钮（Action Button）界面动效设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：