1. 普通旋转加载效果
代码:
<template>
<button data-label="do it!"
class="loading">do it!
</button>
</template>
<script>
export default {
name: 'loaderBackface'
}
</script>
<style scoped>
button {
position: relative;
margin: 0;
border: 0;
border-radius: 0.25rem;
padding: 0;
font-size: 1rem;
font-weight: bold;
color: rgba(0, 0, 0, 0);
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
button,button::after,button::before {
padding: 0.6875rem 2rem;
-webkit-transition: -webkit-transform 0.75s, background-color 0.125s;
-moz-transition: -moz-transform 0.75s, background-color 0.125s;
-ms-transition: -ms-transform 0.75s, background-color 0.125s;
transition: transform 0.75s, background-color 0.125s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
button::after, button::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0.25rem;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
button::before {
z-index: 2;
color: #ffffff;
background-color: #3e87ec;
content: attr(data-label);
}
button::after {
z-index: 1;
background-color: #999999;
background-image: url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj49fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);
background-repeat: no-repeat;
background-position: center center;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
content: '';
}
button:active::before {
background-color: #3571c8;
}
button.loading {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
</style>
2.原点替换加载
代码:
<template>
<div class="loader">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div>
</template>
<script>
export default {
name: 'loaderDot'
};
</script>
<style rel="stylesheet/scss"
lang="scss"
scoped>
.loader {
position: relative;
margin: 100px auto;
width: 40px;
height: 10px;
}
.dot {
position: absolute;
border-radius: 10px;
width: 10px;
height: 10px;
background: #9e9e9e;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.dot1,.dot2 {
left: 0;
}
.dot3 {
left: 15px;
}
.dot4 {
left: 30px;
}
@keyframes reveal {
from {
transform: scale(0.001);
}
to {
transform: scale(1);
}
}
@keyframes slide {
to {
transform: translateX(7.5px);
}
}
.dot1 {
animation-name: reveal;
}
.dot2,.dot3 {
animation-name: slide;
}
.dot4 {
animation-name: reveal;
animation-direction: reverse;
}
</style>
<style rel="stylesheet/scss"
lang="scss">
</style>
3.方块跳动
代码:
<template>
<transition name="fade">
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
</transition>
</template>
<script type="text/javascript">
export default {
name: 'loaderQ'
}
</script>
<style type="text/css" scoped>
#loader {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
z-index: 999;
}
@keyframes loader {
0% { left: -100px; }
100% { left: 110%; }
}
#box {
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
width: 50px;
height: 50px;
background: #292929;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
17% { border-bottom-right-radius: 3px; }
25% { transform: translateY(9px) rotate(22.5deg); }
50% {
border-bottom-right-radius: 40px;
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
}
75% { transform: translateY(9px) rotate(67.5deg); }
100% { transform: translateY(0) rotate(90deg); }
}
#shadow {
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
width: 50px;
height: 5px;
background: #000000;
opacity: 0.1;
animation: shadow 0.5s linear infinite;
}
@keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
</style>
4.音量加载
代码
<template>
<transition name="fade">
<div class="wrapper">
<svg class="center" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background: new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10.3333" width="4" height="10.3333" fill="#333">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="10" y="6.33333" width="4" height="18.3333" fill="#333">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="20" y="7.66667" width="4" height="15.6667" fill="#333">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
<!-- <div class="shaft-load4 center">
<div class="shaft1"></div>
<div class="shaft2"></div>
<div class="shaft3"></div>
<div class="shaft4"></div>
<div class="shaft5"></div>
<div class="shaft6"></div>
<div class="shaft7"></div>
<div class="shaft8"></div>
<div class="shaft9"></div>
<div class="shaft10"></div>
</div> -->
</div>
</transition>
</template>
<script>
export default {
name: 'loaderFlex'
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */
{
opacity: 0;
}
[class^='shaft-load'] > div {
display: inline-block;
float: left;
margin-right: 1px;
width: 5px;
height: 100%;
background: #8f4d66;
}
[class^='shaft-load'] .shaft1 {
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
-o-animation-delay: 0.05s;
animation-delay: 0.05s;
}
[class^='shaft-load'] .shaft2 {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
[class^='shaft-load'] .shaft3 {
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
-o-animation-delay: 0.15s;
animation-delay: 0.15s;
}
[class^='shaft-load'] .shaft4 {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
[class^='shaft-load'] .shaft5 {
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-o-animation-delay: 0.25s;
animation-delay: 0.25s;
}
[class^='shaft-load'] .shaft6 {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
[class^='shaft-load'] .shaft7 {
-webkit-animation-delay: 0.35s;
-moz-animation-delay: 0.35s;
-o-animation-delay: 0.35s;
animation-delay: 0.35s;
}
[class^='shaft-load'] .shaft8 {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
}
[class^='shaft-load'] .shaft9 {
-webkit-animation-delay: 0.45s;
-moz-animation-delay: 0.45s;
-o-animation-delay: 0.45s;
animation-delay: 0.45s;
}
[class^='shaft-load'] .shaft10 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.wrapper {
position: absolute;
/* background: rgba(255, 255, 255, 0.5); */
z-index: 999;
width: 100%;
height: 100%;
}
.center {
position: relative;
top: 50%;
transform: translate(-50%, -50%);
}
.shaft-load4 {
width: 80px;
height: 30px;
}
.shaft-load4 > div {
margin-right: 0;
width: 8px;
background-color: #5a555b;
opacity: 0;
-webkit-transform: scaleY(0.1);
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-o-transform: scaleY(0.1);
transform: scaleY(0.1);
-webkit-animation: loading4 1.5s infinite ease-in-out;
-moz-animation: loading4 1.5s infinite ease-in-out;
-o-animation: loading4 1.5s infinite ease-in-out;
animation: loading4 1.5s infinite ease-in-out;
filter: alpha(opacity=0);
}
@-webkit-keyframes loading4 {
50% {
background: #9a949b;
opacity: 1;
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
filter: alpha(opacity=100);
}
}
@-moz-keyframes loading4 {
50% {
background: #9a949b;
opacity: 1;
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
filter: alpha(opacity=100);
}
}
@-o-keyframes loading4 {
50% {
background: #9a949b;
opacity: 1;
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
filter: alpha(opacity=100);
}
}
@keyframes loading4 {
50% {
background: #9a949b;
opacity: 1;
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
filter: alpha(opacity=100);
}
}
</style>
5.圆环加载
.
<template>
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<path :fill="color" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>
</template>
<script type="text/javascript">
export default {
name: 'loader-ring',
props: {
color: {
default: '#000'
}
},
}
</script>
<style type="text/css" scoped>
svg {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
margin: 20px;
margin: auto;
width: 100px;
height: 100px;
}
</style>