CSS Loading 加载效果

平滑加载

/* 平滑加载 */
.progress-1 {width: 120px;height: 20px;background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;animation: p1 2s infinite linear;
}
@keyframes p1 {100% {background-size: 100%}
}

<div class="progress-1"></div>

按步加载

/* 按步加载 */
.progress-2 {width: 120px;height: 20px;border-radius: 20px;background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;animation: p2 2s infinite steps(10);
}
@keyframes p2 {100% {background-size: 110%}
}

<div class="progress-2"></div>

条纹加载

/* 条纹加载 */
.progress-3 {width: 120px;height: 20px;border-radius: 20px;background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;animation: p3 2s infinite;
}
@keyframes p3 {100% {background-size: 100%}
}

<div class="progress-3"></div>

虚线加载

/* 虚线加载 */
.progress-4 {width: 120px;height: 20px;-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;animation: p4 2s infinite steps(6);
}
@keyframes p4 {100% {background-size: 120%}
}

<div class="progress-4"></div>

电池加载

/* 电池加载 */
.progress-5 {width: 80px;height: 40px;border: 2px solid #000;padding: 3px;background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px) 0/0% no-repeat content-box content-box;position: relative;animation: p5 2s infinite steps(6);
}
.progress-5::before {content: "";position: absolute;top: 50%;left: 100%;transform: translateY(-50%);width: 10px;height: 10px;border: 2px solid #000;
}
@keyframes p5 {100% {background-size: 120%}
}

<div class="progress-5"></div>

内嵌加载

/* 内嵌加载 */
.progress-6 {width: 120px;height: 22px;border-radius: 20px;color: #514b82;border: 2px solid;position: relative;
}
.progress-6::before {content: "";position: absolute;margin: 2px;inset: 0 100% 0 0;border-radius: inherit;background: #514b82;animation: p6 2s infinite;
}
@keyframes p6 {100% {inset: 0}
}

<div class="progress-6"></div>

珠链加载

/* 珠链加载 */
.progress-7 {width: 120px;height: 24px;-webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;animation: p7 2s infinite linear;
}
@keyframes p7 {100% {background-size: 100%}
}

<div class="progress-7"></div>

斑马线加载

/* 斑马线加载 */
.progress-8 {width: 60px;height: 60px;border-radius: 50%;-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;animation: p8 2s infinite steps(7);
}
@keyframes p8 {100% {background-size: 100% 115%}
}

<div class="progress-8"></div>

水柱加载

/* 水柱加载 */
.progress-9 {--r1: 154%;--r2: 68.5%;width: 60px;height: 60px;border-radius: 50%;background:radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,#ccc;background-size: 50.5% 220%;background-position: -100% 0%, 0% 0%, 100% 0%;background-repeat: no-repeat;animation: p9 2s infinite linear;
}
@keyframes p9 {33% {background-position: 0% 33%, 100% 33%, 200% 33%}66% {background-position: -100% 66%, 0% 66%, 100% 66%}100% {background-position: 0% 100%, 100% 100%, 200% 100%}
}

<div class="progress-9"></div>

信号加载

/* 信号加载 */
.progress-10 {width: 120px;height: 60px;border-radius: 200px 200px 0 0;-webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;animation: p10 2s infinite steps(6);
}
@keyframes p10 {100% {background-size: 120% 120%}
}

<div class="progress-10"></div>

HTML完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS Loading 加载效果</title></head><style type="text/css">* {box-sizing: border-box;}div {margin-top: 20px;}/* 垂直水平居中 */.flex-center {display: flex;align-items: center;justify-content: center;}/* 平滑加载 */.progress-1 {width: 120px;height: 20px;background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;animation: p1 2s infinite linear;}@keyframes p1 {100% {background-size: 100%}}/* 按步加载 */.progress-2 {width: 120px;height: 20px;border-radius: 20px;background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;animation: p2 2s infinite steps(10);}@keyframes p2 {100% {background-size: 110%}}/* 条纹加载 */.progress-3 {width: 120px;height: 20px;border-radius: 20px;background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;animation: p3 2s infinite;}@keyframes p3 {100% {background-size: 100%}}/* 虚线加载 */.progress-4 {width: 120px;height: 20px;-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;animation: p4 2s infinite steps(6);}@keyframes p4 {100% {background-size: 120%}}/* 电池加载 */.progress-5 {width: 80px;height: 40px;border: 2px solid #000;padding: 3px;background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px) 0/0% no-repeat content-box content-box;position: relative;animation: p5 2s infinite steps(6);}.progress-5::before {content: "";position: absolute;top: 50%;left: 100%;transform: translateY(-50%);width: 10px;height: 10px;border: 2px solid #000;}@keyframes p5 {100% {background-size: 120%}}/* 内嵌加载 */.progress-6 {width: 120px;height: 22px;border-radius: 20px;color: #514b82;border: 2px solid;position: relative;}.progress-6::before {content: "";position: absolute;margin: 2px;inset: 0 100% 0 0;border-radius: inherit;background: #514b82;animation: p6 2s infinite;}@keyframes p6 {100% {inset: 0}}/* 珠链加载 */.progress-7 {width: 120px;height: 24px;-webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;animation: p7 2s infinite linear;}@keyframes p7 {100% {background-size: 100%}}/* 斑马线加载 */.progress-8 {width: 60px;height: 60px;border-radius: 50%;-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;animation: p8 2s infinite steps(7);}@keyframes p8 {100% {background-size: 100% 115%}}/* 水柱加载 */.progress-9 {--r1: 154%;--r2: 68.5%;width: 60px;height: 60px;border-radius: 50%;background:radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,#ccc;background-size: 50.5% 220%;background-position: -100% 0%, 0% 0%, 100% 0%;background-repeat: no-repeat;animation: p9 2s infinite linear;}@keyframes p9 {33% {background-position: 0% 33%, 100% 33%, 200% 33%}66% {background-position: -100% 66%, 0% 66%, 100% 66%}100% {background-position: 0% 100%, 100% 100%, 200% 100%}}/* 信号加载 */.progress-10 {width: 120px;height: 60px;border-radius: 200px 200px 0 0;-webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;animation: p10 2s infinite steps(6);}@keyframes p10 {100% {background-size: 120% 120%}}</style><body><div class="flex-center" style="flex-direction: column"><div class="flex-center"><div>平滑加载：</div><div class="progress-1"></div></div><div class="flex-center"><div>按步加载：</div><div class="progress-2"></div></div><div class="flex-center"><div>条纹加载：</div><div class="progress-3"></div></div><div class="flex-center"><div>虚线加载：</div><div class="progress-4"></div></div><div class="flex-center"><div>电池加载：</div><div class="progress-5"></div></div><div class="flex-center"><div>内嵌加载：</div><div class="progress-6"></div></div><div class="flex-center"><div>珠链加载：</div><div class="progress-7"></div></div><div class="flex-center"><div>斑马线加载：</div><div class="progress-8"></div></div><div class="flex-center"><div>水柱加载：</div><div class="progress-9"></div></div><div class="flex-center"><div>信号加载：</div><div class="progress-10"></div></div></div></body>
</html>

CSS Loading 加载效果相关推荐

使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
android 百分比loading,牛逼的loading加载效果
牛逼的loading加载效果介绍: AnimatedCircleLoadingView一个不错的loading加载效果,自定义AnimatedCircleLoadingView设置startDete ...
jquery实现文件上传及loading加载效果
jQuery实现文件上传步骤 1.定义UI结构 2.验证是否选择了文件 3.向formdata中追加文件 4.使用jQuery的Ajax发起上传文件的请求核心代码 1.ajaxStart(callb ...
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...
loading加载效果（纯css）
一.平滑加载 <div class="loading-1"></div> *{box-sizing: border-box;}.loading-1{marg ...
WPF 类似jquery blockUI的遮罩Loading加载效果
最近一个小项目想用WPF重写一下,需要一个类似Jquery 的blockUI的遮罩层,在后台执行任务的过程中显示Loading... 网上找了一圈,很难找到一个可以现成使用的.最终在基于网上资料的基础 ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
vue项目中，设置页面局部loading加载效果（element）
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图话不多说,直接上代码封装好的loading.js i ...
vue 集成 Loading 加载效果
文章目录 1. 工具类 2. 插件官网 3. 导入js 4.. 使用 5. 效果图 1. 工具类 Loading = {show: function () {$.blockUI({message: ' ...

CSS Loading 加载效果

平滑加载

按步加载

条纹加载

虚线加载

电池加载

内嵌加载

珠链加载

斑马线加载

水柱加载

信号加载

HTML完整代码

CSS Loading 加载效果相关推荐

最新文章

热门文章