css loading 加载动画

最新推荐文章于 2024-07-13 11:50:40 发布

qq_34491588

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量60

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_34491588/article/details/117664288

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div className='loading'>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<p>数据处理中</p>
</div>

.loading {
    width: 150px;
    height: 15px;
    margin: auto;
    text-align: center;
}

.loading p {
    color: #666666;
    font-size: 14px;
    line-height: 24px;
}

.loading span {
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background:#69A0FF;
    animation: load 1.04s ease infinite;
    -webkit-animation: load 1.04s ease infinite;
    transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
}

.loading span:last-child {
    margin-right: 0px;
}

@keyframes load {
    0% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        transform:  rotate(90deg) scale(.3);
        -webkit-transform: rotate(90deg) scale(.3);
    }
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        transform:  rotate(90deg) scale(.3);
        -webkit-transform: rotate(90deg) scale(.3);
    }
}

.loading span:nth-child(1) {
    animation-delay: 0.13s;
    -webkit-animation-delay: 0.13s;
}

.loading span:nth-child(2) {
    animation-delay: 0.26s;
    -webkit-animation-delay: 0.26s;
}

.loading span:nth-child(3) {
    animation-delay: 0.39s;
    -webkit-animation-delay: 0.39s;
}

.loading span:nth-child(4) {
    animation-delay: 0.52s;
    -webkit-animation-delay: 0.52s;
}

.loading span:nth-child(5) {
    animation-delay: 0.65s;
    -webkit-animation-delay: 0.65s;
}