html条形加载,展示一个漂亮的css动态条形加载条源码

运用了css变量的知识，直接上代码及其我加的注释

展示一个css动态条形加载条

/* 使用CSS变量 */

.flex {

display: flex;

list-style: none;

/* 设定li元素横向排列 */

}

.loading {

width: 200px;

height: 200px;

}

.loading>li {

/* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */

/* 此时定一个动画延迟的变量--time 经过计算calc */

--time: calc((var(--line-index) - 1) * 200ms);

border-radius: 3px;

width: 6px;

height: 30px;

background-color: #f66;

/* 动画都是一个动画,但是开始的时间不同,就显示出这样的效果了 */

animation: beat 1.5s ease-in-out var(--time) infinite;

}

.loading>li+li {

margin-left: 5px;

}

@keyframes beat {

0%,

100% {

transform: scaleY(1);

}

50% {

transform: scaleY(.5);

}

}

看效果

非常漂亮和顺畅