按钮加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body{background-color: #282828;overflow: hidden }
*{
  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); } }

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>'  
  }
 
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg