HTML5/SVG一款带水平进度条动画提示的上传按钮

Upload Button Animation

html5, button, widget

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

$(".button a span").click(function() {
        var btn = $(this).parent().parent();
        var loadSVG = btn.children("a").children(".load");
        var loadBar = btn.children("div").children("span");
        var checkSVG = btn.children("a").children(".check");

btn.children("a").children("span").fadeOut(200, function() {
            btn.children("a").animate({
                width: 56
            }, 100, function() {
                loadSVG.fadeIn(300);
                btn.animate({
                    width: 320
                }, 200, function() {
                    btn.children("div").fadeIn(200, function() {
                        loadBar.animate({
                            width: "100%"
                        }, 2000, function() {
                            loadSVG.fadeOut(200, function() {
                                checkSVG.fadeIn(200, function() {
                                    setTimeout(function() {
                                        btn.children("div").fadeOut(200, function() {
                                            loadBar.width(0);
                                            checkSVG.fadeOut(200, function() {
                                                btn.children("a").animate({
                                                    width: 150
                                                });
                                                btn.animate({
                                                    width: 150
                                                }, 300, function() {
                                                    btn.children("a").children("span").fadeIn(200);
                                                });
                                            });
                                        });
                                    }, 2000);
                                });
                            });
                        });
                    });
                });
            });
        });

});

编译

CSS

body {
    background: #242133;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.button {
    border-radius: 28px;
    margin: 10% auto 0 auto;
    display: block;
    position: relative;
    background: #fff;
    width: 150px;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.2);
}
.button svg {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    fill: #fff;
}
.button div {
    height: 4px;
    margin: -2px 0 0 0;
    position: absolute;
    top: 50%;
    left: 71px;
    right: 25px;
    background: #d3d7e0;
    display: none;
    border-radius: 2px;
}
.button div span {
    position: absolute;
    background: #28e470;
    height: 4px;
    left: 0;
    top: 0;
    width: 0;
    display: block;
    border-radius: 2px;
}
.button a {
    position: relative;
    display: block;
    background: #5773ff;
    z-index: 2;
    line-height: 56px;
    height: 56px;
    border-radius: 28px;
    width: 100%;
    text-align: center;
    color: #fff;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.4);
}
.button a span {
    cursor: pointer;
    display: block;
}

HTML

Upload Button Animation

html5, button, widget

编辑器支持Emmet

快捷键

Upload Button Animation

html5, button, widget

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

HTML5 SVG使用球体水面波动显示进度动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：