<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: black;
}
.container {
text-align: center;
}
section {
width: 30%;
display: inline-block;
text-align: center;
min-height: 215px;
vertical-align: top;
margin: 1%;
background: #080915;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 1px #103136 inset;
box-shadow: 0px 0px 30px 1px #103136 inset;
}
@media only screen and (max-width: 600px) {
section {
min-width: 350px;
}
}
.loader {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 75px;
display: inline-block;
vertical-align: middle;
}
.loader-star {
position: absolute;
top: calc(50% - 12px);
}
/*LOADER-1*/
.loader-1 .loader-outter {
position: absolute;
border: 4px solid #f50057;
border-left-color: transparent;
border-bottom: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
.loader-1 .loader-inner {
position: absolute;
border: 4px solid #f50057;
border-radius: 50%;
width: 40px;
height: 40px;
left: calc(50% - 20px);
top: calc(50% - 20px);
border-right: 0;
border-top-color: transparent;
-webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
/*LOADER-2*/
.loader-2 .loader-star {
position: static;
width: 60px;
height: 60px;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation: loader-2-star 1s ease alternate infinite;
animation: loader-2-star 1s ease alternate infinite;
}
.loader-2 .loader-circles {
width: 8px;
height: 8px;
background: #18ffff;
border-radius: 50%;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;
animation: loader-2-circles 1s ease-in-out alternate infinite;
}
/*LOADER-3*/
.loader-3 .dot {
width: 10px;
height: 10px;
background: #00e676;
border-radius: 50%;
position: absolute;
top: calc(50% - 5px);
}
.loader-3 .dot1 {
left: 0px;
-webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}
.loader-3 .dot2 {
left: 20px;
-webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}
.loader-3 .dot3 {
left: 40px;
-webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}
/*LOADER-4*/
.loader-4 {
border: 7px double #ff5722;
-webkit-animation: ball-turn 1s linear infinite;
animation: ball-turn 1s linear infinite;
}
.loader-4:before,
.loader-4:after {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #ff5722;
border-radius: 50%;
bottom: 0;
right: 37px;
}
.loader-4:after {
left: 37px;
top: 0;
}
/*LOADER-5*/
.loader-5 {
border: 8px dotted rgba(255, 255, 0, 1);
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-animation: dotted-spin 1s linear infinite;
animation: dotted-spin 1s linear infinite;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 0, 0.3);
border-left-width: 2px;
border-left-color: rgba(255, 255, 0, 0.5);
border-top-width: 3px;
border-right-width: 4px;
border-top-color: rgba(255, 255, 0, 0.7);
}
.loader-5 .loader-pacman,
.loader-pacman {
position: absolute;
top: 40px;
left: 25px;
width: 0px;
height: 0px;
border-right: 12px solid transparent;
border-top: 12px solid rgba(255, 255, 0, 1);
border-left: 12px solid rgba(255, 255, 0, 1);
border-bottom: 12px solid rgba(255, 255, 0, 1);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/*LOADER-6*/
.loader-6 {
border: 6px groove #7e57c2;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-animation: loader-1-inner 1s ease-out alternate infinite;
animation: loader-1-inner 1s ease-out alternate infinite;
}
.loader-6 .loader-inner {
border: 0px inset #9575cd;
border-radius: 50%;
width: 100%;
height: 100%;
-webkit-animation: border-zoom 1s ease-out alternate infinite;
animation: border-zoom 1s ease-out alternate infinite;
}
/*LOADER-7*/
.loader-7 .line {
width: 8px;
position: absolute;
border-radius: 5px;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce));
background: -webkit-linear-gradient(top, #1ee95d, #5714ce);
background: -o-linear-gradient(top, #1ee95d, #5714ce);
background: linear-gradient(to bottom, #1ee95d, #5714ce);
}
.loader-7 .line1 {
left: 0;
-webkit-animation: line-grow 0.5s ease alternate infinite;
animation: line-grow 0.5s ease alternate infinite;
}
.loader-7 .line2 {
left: 20px;
-webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
animation: line-grow 0.5s 0.2s ease alternate infinite;
}
.loader-7 .line3 {
left: 40px;
-webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
animation: line-grow 0.5s 0.4s ease alternate infinite;
}
/*LOADER-8*/
.loader-8 .star1 {
-webkit-animation: star-jump 0.5s ease-out alternate infinite;
animation: star-jump 0.5s ease-out alternate infinite;
}
.loader-8 .star2 {
-webkit-animation: star-jump 0.5s 0.25s ease-out alternate infinite;
animation: star-jump 0.5s 0.25s ease-out alt
【前端素材】模板-多种实用loading.zip
版权申诉
133 浏览量
2024-04-04
18:35:41
上传
评论
收藏 64KB ZIP 举报
【前端素材】模板-多种实用loading.zip （44个子文件） 
loading 
多圆环相交转动.html 7KB
style.css 84KB 三环形相交.html 6KB 牛顿摆.htm 2KB 方块loading.htm 13KB index6.html 13KB 153.七彩圆环loading.html 2KB 线条动态缩短的圆弧loading.htm 4KB index4.html 7KB 圆环loading.html 1KB 142.锅loading.htm 7KB loading05.htm 827B 气泡 Loading.htm 14KB 水球2.htm 1KB 圆环加载.html 5KB loading光影加载.htm 2KB 文字滚动loading.htm 2KB webkit-box-reflect实现loading.htm 2KB loading01.htm 2KB border圆弧.html 1KB 环形文字加载动画.html 7KB 156.竖条小球跳动.htm 4KB 圆环加载2.html 2KB 盘状加载.htm 2KB 尾迹转动.htm 5KB index.html 66KB 五彩圆环.html 3KB loading02.htm 2KB svg实现wifi形状的loading.htm 5KB loading09.htm 1KB index3.html 13KB 转动.htm 2KB 圆点绕圆环2.htm 1KB index5.html 2KB loading2.html 6KB loading03.htm 2KB 音频loading.htm 2KB loading08.htm 2KB 圆点绕圆环.htm 1KB loading07.htm 3KB loading.html 26KB loading10.htm 5KB loading04.htm 905B 水球.html 3KB资源评论
