阅读 118

一个好看的按钮加载动画分享


效果图

加载中

来源:http://ww.jq22.com
复制代码
HTML代码
<button class="button">
	<span class="submit">上传</span>
	<span class="loading"><i class="fa fa-refresh"></i></span>
	<span class="check"><i class="fa fa-check"></i></span>
</button>
复制代码
CSS代码
<style type="text/css">
	html {
	  box-sizing: border-box;
	  font-family: "微软雅黑";
	}

	*, *::after, *::before {
	  box-sizing: inherit;
	}

	*, *:before, *:after {
	  box-sizing: border-box;
	  outline: none;
	}

	html {
	  font-family: 'Source Sans Pro', sans-serif;
	  font-size: 16px;
	  font-smooth: auto;
	  font-weight: 300;
	  line-height: 1.5;
	  color: #444;
	}

	body {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 100vh;
	}

	.hide {
	  display: none;
	}

	.button {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  width: 12.5rem;
	  magrin: 0;
	  padding: 1.5rem 3.125rem;
	  background-color: #3498db;
	  border: none;
	  border-radius: 0.3125rem;
	  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);
	  color: white;
	  font-weight: 300;
	  text-transform: uppercase;
	  overflow: hidden;
	}
	.button:before {
	  position: absolute;
	  content: '';
	  bottom: 0;
	  left: 0;
	  width: 0%;
	  height: 100%;
	  background-color: #54d98c;
	}
	.button span {
	  position: absolute;
	  line-height: 0;
	}
	.button span i {
	  transform-origin: center center;
	}
	.button span:nth-of-type(1) {
	  top: 50%;
	  transform: translateY(-50%);
	}
	.button span:nth-of-type(2) {
	  top: 100%;
	  transform: translateY(0%);
	  font-size: 24px;
	}
	.button span:nth-of-type(3) {
	  display: none;
	}

	.active {
	  background-color: #2ecc71;
	}
	.active:before {
	  width: 100%;
	  transition: width 3s linear;
	}
	.active span:nth-of-type(1) {
	  top: -100%;
	  transform: translateY(-50%);
	}
	.active span:nth-of-type(2) {
	  top: 50%;
	  transform: translateY(-50%);
	}
	.active span:nth-of-type(2) i {
	  animation: loading 500ms linear infinite;
	}
	.active span:nth-of-type(3) {
	  display: none;
	}

	.finished {
	  background-color: #54d98c;
	}
	.finished .submit {
	  display: none;
	}
	.finished .loading {
	  display: none;
	}
	.finished .check {
	  display: block !important;
	  font-size: 24px;
	  animation: scale 0.5s linear;
	}
	.finished .check i {
	  transform-origin: center center;
	}

	@keyframes loading {
	  100% {
	    transform: rotate(360deg);
	  }
	}
	@keyframes scale {
	  0% {
	    transform: scale(10);
	  }
	  50% {
	    transform: scale(0.2);
	  }
	  70% {
	    transform: scale(1.2);
	  }
	  90% {
	    transform: scale(0.7);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
</style>
复制代码
JS代码
//引入图标地址
<script src="https://use.fontawesome.com/2473308824.js"></script>
复制代码
<script type="text/javascript">
	const button = document.querySelector('.button');
	const submit = document.querySelector('.submit');

	function toggleClass() {
		this.classList.toggle('active');
	}

	function addClass() {
		this.classList.add('finished');
	}

	button.addEventListener('click', toggleClass);
	button.addEventListener('transitionend', toggleClass);
	button.addEventListener('transitionend', addClass);
</script>
复制代码