227 lines
5.3 KiB
HTML
227 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Loading示例</title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
</style>
|
|
</head>
|
|
|
|
<body class="px4 py4">
|
|
<blockquote>pulse-loader</blockquote>
|
|
<div class="pulse-loader"></div>
|
|
|
|
<style>
|
|
.pulse-loader {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--man6);
|
|
box-shadow: 0 0 0 0 var(--man6);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 0 0 0 var(--man6);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 15px #ffffff00;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 0 0 0 #ffffff00;
|
|
}
|
|
}
|
|
</style>
|
|
<blockquote>ring-loader</blockquote>
|
|
<div class="ring-loader"></div>
|
|
<style>
|
|
.ring-loader {
|
|
width: 4em;
|
|
height: 4em;
|
|
border: 0.2em solid var(--man3);
|
|
border-radius: 50%;
|
|
border-top-color: var(--man6);
|
|
border-left-color: var(--man4);
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
<blockquote>bounce-loader</blockquote>
|
|
<div class="bounce-loader">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<style>
|
|
.bounce-loader {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.bounce-loader div {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--man6);
|
|
animation: bounce 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.bounce-loader div:nth-child(1) {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.bounce-loader div:nth-child(2) {
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
<blockquote>neon-loader</blockquote>
|
|
<div class="neon-bounce">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
|
|
<style>
|
|
.neon-bounce {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.neon-bounce span {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--man4);
|
|
box-shadow: 0 0 10px var(--man4), 0 0 20px var(--man4);
|
|
animation: neon-bounce 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.neon-bounce span:nth-child(2) {
|
|
background: var(--man5);
|
|
box-shadow: 0 0 10px var(--man5), 0 0 20px var(--man5);
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.neon-bounce span:nth-child(3) {
|
|
background: var(--man6);
|
|
box-shadow: 0 0 10px var(--man6), 0 0 20px var(--man6);
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes neon-bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
</style>
|
|
<blockquote>fluid-loader</blockquote>
|
|
<div class="fluid-bounce"></div>
|
|
<style>
|
|
.fluid-bounce {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(45deg, var(--man6), var(--man3));
|
|
animation:
|
|
fluid-bounce 1.2s infinite ease-in-out,
|
|
color-shift 3s infinite alternate;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
@keyframes fluid-bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-30px) scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes color-shift {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
<blockquote>minimal-loader</blockquote>
|
|
<div class="minimal-bounce">
|
|
<div class="line"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.minimal-bounce {
|
|
width: 60px;
|
|
position: relative;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: var(--man6);
|
|
border-radius: 3px;
|
|
animation: stretch 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@keyframes stretch {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scaleX(0.3);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
50% {
|
|
transform: scaleX(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
|
</body>
|
|
|
|
</html> |