css3 圆形弹性动画,CSS3 一个简单的变形弹性圆圈加载动画

CSS

语言：

CSSSCSS

确定

.container {

width: 100vw;

height: 100vh;

position: fixed;

top: 0;

left: 0;

background: #292970;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: stretch;

-webkit-align-items: stretch;

-ms-flex-align: stretch;

align-items: stretch;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

}

.flex {

min-height: 60pt;

}

@-webkit-keyframes loading {

0% {

width: 50pt;

height: 50pt;

margin-top: 0;

}

25% {

height: 4pt;

margin-top: 23pt;

}

50% {

width: 4pt;

}

75% {

width: 50pt;

}

100% {

width: 50pt;

height: 50pt;

margin-top: 0;

}

}

@keyframes loading {

0% {

width: 50pt;

height: 50pt;

margin-top: 0;

}

25% {

height: 4pt;

margin-top: 23pt;

}

50% {

width: 4pt;

}

75% {

width: 50pt;

}

100% {

width: 50pt;

height: 50pt;

margin-top: 0;

}

}

.loader {

width: 50pt;

height: 50pt;

border-radius: 100%;

border: #6767fa 4pt solid;

margin-left: auto;

margin-right: auto;

background-color: transparent;

-webkit-animation: loading 1s infinite;

animation: loading 1s infinite;

}

.load-text {

padding-top: 15px;

text-align: center;

font: 14pt "Helvetica Neue", Helvetica, Arial, sans-serif;

color: white;

}