c3等待加载样式 vue_Vue.js__简易加载等待动画

Vue.js__简易加载等待动画Vue实现为览或讲琐了过自系一读页围这就多网解元当维自加，加载动画的样式取自其他出处，侵直分调浏器代，刚求的一学础过功互有解小久宗点差维含数删。

将Vue属性览或讲琐了过自系一读页围这就多网解元当维和方法复制到自己页面即可使用，注意调直分调浏器代，刚求的一学础过功互有解小久宗点差维含数试。

Title

*{

margin: 0;

padding: 0;

}

body{

/*    background-color: black;*/

}

.VLloading {

position: absolute;

width: 480px;

height: 300px;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

text-align: center;

}

svg {

height: 120px;

width: 120px;

margin: 0 2em 2em;

overflow: visible;

}

circle {

fill: white;

fill-opacity: 1;

-webkit-animation: opacity 1.2s linear infinite;

animation: opacity 1.2s linear infinite;

}

circle:nth-child(12n + 1) {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

circle:nth-child(12n + 2) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

circle:nth-child(12n + 3) {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

circle:nth-child(12n + 4) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

circle:nth-child(12n + 5) {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

circle:nth-child(12n + 6) {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

circle:nth-child(12n + 7) {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

circle:nth-child(12n + 8) {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

circle:nth-child(12n + 9) {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

circle:nth-child(12n + 10) {

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

circle:nth-child(12n + 11) {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

circle:nth-child(12n + 12) {

-webkit-animation-delay: -1.2s;

animation-delay: -1.2s;

}

@-webkit-keyframes opacity {

3%{fill-opacity: 1;}

75%{fill-opacity: 0.2;}

}

.VLloadingTransition-leave-active,.VLloadingTransition-enter-active{

transition: opacity 0.4s;

}

.VLloadingTransition-enter, .VLloadingTransition-leave-to{

opacity: 0.1;

}

var app = new Vue({

el:".app",

data:{

VueLibrary:{

loading:{loadingShow:false,VLloading:function(){}}

},

},

});

/

app.VueLibrary.loading.VLloading=function(){

app.VueLibrary.loading.loadingShow=!app.VueLibrary.loading.loadingShow;

}

setTimeout("app.VueLibrary.loading.VLloading();",200);

本文来源于网络：查看 >https://blog.csdn.net/qq_33593656/article/details/80819658