css转圈加载动画

< template >

< div class= "footer-loading" v-if=" LoadingAnimation" >

< div class= "Loader" ></ div >

{{ AnimateText}}

</ div >

</ template >

< script >

export default {

data(){

return{

}

},

props:{

LoadingAnimation: {

type: Boolean

},

AnimateText:{

type: String

}

}

}

</ script >

< style lang= "scss" scoped >

.footer-loading{

// background: blue;

width: 100%;

position: relative;

overflow: hidden;

text-align: center;

height: 80px;

}

.Loader {

margin: 1em auto;

width: 6px;

height: 6px;

border-radius: 50%;

position: relative;

text-indent: -9999em;

// -webkit-animation: load 1.1s infinite ease;

animation: load 1s infinite ease;

}

@keyframes load {

0%, 100%{

// box-shadow: 0em -0.975em 0em 0em rgba(0, 0, 0, 1), 0.675em -0.675em 0 0em rgba(0, 0, 0, 0.2), 0.9375em 0em 0 0em rgba(0, 0, 0, 0.2), 0.65625em 0.65625em 0 0em rgba(0, 0, 0, 0.2), 0em 0.9375em 0 0em rgba(0, 0, 0, 0.2), -0.675em 0.675em 0 0em rgba(0, 0, 0, 0.2), -0.99em 0em 0 0em rgba(0, 0, 0, 0.5), -0.675em -0.675em 0 0em rgba(0, 0, 0, 0.7);

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.9), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.2), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.2), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.2), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.2), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.5), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.7);

}

12. 5%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.7), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.9), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.2), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.2), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.2), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.2), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.2), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.5);

}

25%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.5), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.7), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.9), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.2), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.2), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.2), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.2), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2);

}

37. 5%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.2), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.5), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.7), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.9), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.2), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.2), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.2), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2);

}

50%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.2), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.5), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.7), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.9), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.2), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.2), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2);

}

62. 5%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.2), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.2), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.5), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.7), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.9), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.2), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2);

}

75%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.2), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.2), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.2), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.5), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.7), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.9), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2);

}

87. 5%{

box-shadow: 0em -0.65em 0em 0em rgba( 0, 0, 0, 0.2), 0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.2), 0.625em 0em 0 0em rgba( 0, 0, 0, 0.2), 0.4375em 0.4375em 0 0em rgba( 0, 0, 0, 0.2), 0em 0.625em 0 0em rgba( 0, 0, 0, 0.2), -0.45em 0.45em 0 0em rgba( 0, 0, 0, 0.5), -0.65em 0em 0 0em rgba( 0, 0, 0, 0.7), -0.45em -0.45em 0 0em rgba( 0, 0, 0, 0.9);

}

}

</ style >