css svg带运动动画的提交按钮

Submit button with movement and loading animation

css, button, loading

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function init() {
    updateSVG('init');
}

function onClick() {
    updateSVG('request');
    addClass('container', 'background-request');
    addClass('circle', 'request');
    addClass('text', 'text-request');
    changeText('Loading...');

setTimeout(() => {
        /*
        Call on request success
        */
        receive();
        reset();
    }, 2000);

// setTimeout(() => {
    //   /*
    //   Call on request failure
    //   */
    //   failure();
    // }, 2000);

}

/*
@description: Methods executed on request success
*/
function receive() {
    updateSVG('receive');
    removeClass('container', 'background-request');
    addClass('container', 'background-receive');
    addClass('circle', 'receive');
    addClass('text', 'text-success');
    changeText('Success!');
    removeClass('text', 'text-request');
}

/*
@description: Methods executed on request failure
*/
function failure() {
    reset();
}

function reset() {
    setTimeout(() => {
        removeClass('container', 'background-request');
        removeClass('container', 'background-receive');
        removeClass('circle', 'request');
        removeClass('circle', 'receive');
        removeClass('text', 'text-success');
        changeText('Submit');
        updateSVG('init');
    }, 3000)
}

/*
@utlilty function
@description - Adds class to a element
*/
function addClass(elementId, classname) {
    var element, name, arr;
    element = document.getElementById(elementId);
    name = classname;
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}

/*
@utlilty function
@description - Removes class to a element
*/
function removeClass(id, className) {
    var element = document.getElementById(id);
    element.classList.remove(className);
}

function changeText(value) {
    var text = document.getElementById('text');
    text.innerText = value;
}

function updateSVG(state) {
    var circle = document.getElementById('circle');

if (state === 'init') {
        circle.innerHTML = '<svg id="send" width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-600.000000, -242.000000)" fill="#FFFFFF"><path d="M613.280832,242.117931 C613.811347,241.831834 614.115509,242.084273 613.958803,242.680589 L611.174009,253.230839 C611.017303,253.826595 610.886171,254.312399 610.88345,254.311277 C610.88073,254.310716 610.877465,254.300057 610.877465,254.296691 C610.877465,254.293326 610.423671,254.10035 609.868671,253.867546 L608.042612,253.101254 C607.488156,252.867889 606.577304,252.49428 606.020127,252.272134 L605.82751,252.194158 C605.270333,251.970329 605.148451,251.419452 605.558171,250.970112 L611.211553,244.73039 C611.620185,244.279367 611.569582,244.222708 611.099465,244.604732 L603.948672,250.418112 C603.476377,250.799014 602.634083,250.921868 602.078539,250.695234 L600.43204,250.024308 C599.875407,249.797114 599.853643,249.376943 600.384157,249.090285 L613.280832,242.117931 Z M605.61748,252.901547 C606.171392,253.135474 606.35748,253.749741 606.029921,254.26696 C606.029921,254.26696 604.870951,256.097981 604.904686,255.995884 C604.937333,255.893225 603.76476,252.979523 603.764216,252.979523 C603.534598,252.409012 603.800127,252.134695 604.354039,252.368621 L605.61748,252.901547 Z" id="Combined-Shape"></path></g></g></svg>'
    }

if (state === 'request') {

circle.innerHTML = '<svg class="rotate" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="path-1" cx="1030" cy="249" r="8"></circle><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="16" height="16" fill="white"><use xlink:href="#path-1"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="2,2"><g transform="translate(-1022.000000, -241.000000)" fill-rule="nonzero" stroke="#FFFFFF" stroke-width="4"><use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use></g></g></svg>';

}

if (state === 'receive') {
        circle.innerHTML = '<svg width="13px" height="10px" viewBox="0 0 13 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1086.000000, -244.000000)" fill="#FFFFFF"><polygon id="Path" points="1090.58843 254 1086 249.384589 1087.52935 247.846184 1090.58843 250.92319 1097.47065 244 1099 245.538405"></polygon></g></g></svg>'
    }

}

window.onload = function() {
    init();
};

编译

CSS

* {
    font-family: 'Roboto';
}
.super-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 200px;
    height: 43px;
    position: relative;
    text-align: center;
    border-radius: 25px;
    background-color: #D3E5FB;
    background: linear-gradient( to left, #D3E5FB, #D3E5FB 50%, #4675a8 50%, #3c95fb);
    background-position: 90% 0;
    background-size: 200% 100%;
    border: 2px solid #3c95fb;
    pointer-events: all;
    transition: 0.7s all;
}
.reset-background {
    border-radius: 25px;
    background-color: #D3E5FB;
    background: linear-gradient( to left, transparent, transparent 50%, #4675a8 50%, #3c95fb);
    background-position: 90% 0;
    background-size: 200% 100%;
}
.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0%;
    height: 44px;
    width: 44px;
    background-color: #3c95fb;
    border-radius: 50%;
    box-shadow: 1px 1px 10px grey;
    transition: 0.7s all;
}
.text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #3c95fb;
    user-select: none;
}
.text-request {
    color: #D3E5FB;
}
.request {
    left: calc(88% - 42px);
}
.receive {
    left: calc(100% - 42px);
    background-color: #4EC10F;
    transition: 2.7s all;
}
.failure {
    left: 0;
}
.background-request {
    background-position: 23% 0;
    user-select: none;
    pointer-events: none;
}
.background-receive {
    background-position: 0 0;
    background: #daffd9;
    border-color: #4ABD5D;
    user-select: none;
    pointer-events: none;
    transition: 1.7s all;
}
.background-failure {
    background-position: 90% 0;
    user-select: none;
    pointer-events: none;
    transition: 0.7s all;
}
.text-success {
    color: #59bf42;
}
.rotate {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    transition: 2.7s all;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(-360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

HTML

Submit button with movement and loading animation

css, button, loading

编辑器支持Emmet

快捷键

Submit button with movement and loading animation

css, button, loading

使用svg path和css clip-path实现单击并保持按钮动画特效

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：