SVG 原质化设计风格的圆形上传按钮进度动画

material design upload button with progress, 上传到云端服务器的动画按钮。进度以扇形旋转填充动画来表示。比较简洁实用的一个上传按钮。

上传，按钮，进度

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

第三方库
作品简介 1971
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    background: #616161;
}
.button {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    margin: -50px;
    overflow: hidden;
    cursor: pointer;
    background: #1976D2;
}
.button:active {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.icon,
.upload,
.done,
.circle,
.clipper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.upload,
.done {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: opacity 0s linear;
    transition: opacity 0s linear;
}
.upload svg,
.done svg {
    fill: white;
}
.done {
    opacity: 0;
}
input:checked ~ .icon .done {
    opacity: 1;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
.upload {
    opacity: 1;
}
input:checked ~ .icon .upload {
    opacity: 0;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
.clipper {
    width: 50%;
    overflow: hidden;
}
.clipper:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0px solid white;
    -webkit-transition: -webkit-transform 0s linear;
    transition: transform 0s linear;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    background: #388E3C;
}
.clipper._1:before {
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.clipper._2:before {
    border-top-right-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
    -webkit-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}
input:checked ~ .circle .clipper:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
input:checked ~ .circle .clipper._1:before {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
.clipper._2,
.clipper._2:before {
    left: auto;
    right: 0;
}

HTML

material design upload button with progress, 上传到云端服务器的动画按钮。进度以扇形旋转填充动画来表示。比较简洁实用的一个上传按钮。

上传，按钮，进度

编辑器支持Emmet

快捷键

material design upload button with progress, 上传到云端服务器的动画按钮。 进度以扇形旋转填充动画来表示。比较简洁实用的一个上传按钮。

上传，按钮，进度

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

material design upload button with progress, 上传到云端服务器的动画按钮。进度以扇形旋转填充动画来表示。比较简洁实用的一个上传按钮。