mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
230 lines
2.7 KiB
HTML
230 lines
2.7 KiB
HTML
<section class="container">
|
|
<div>
|
|
<div>
|
|
<span class="one h6"></span>
|
|
<span class="two h3"></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
<span class="one h1"></span>
|
|
<span class="two h4"></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
<span class="one h5"></span>
|
|
<span class="two h2"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loading, loader, line, line loader */
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.container div {
|
|
position: absolute;
|
|
width: 90px;
|
|
height: 51px;
|
|
}
|
|
|
|
.container div:nth-of-type(2) {
|
|
transform: rotate(60deg)
|
|
}
|
|
|
|
.container div:nth-of-type(3) {
|
|
transform: rotate(-60deg)
|
|
}
|
|
|
|
.container div div {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative
|
|
}
|
|
|
|
.container div div span {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 0%;
|
|
background: #053146;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.h1 {
|
|
left: 0;
|
|
animation: load1 7.2s ease infinite;
|
|
}
|
|
|
|
.h2 {
|
|
right: 0;
|
|
animation: load2 7.2s ease .6s infinite;
|
|
}
|
|
|
|
.h3 {
|
|
right: 0;
|
|
animation: load3 7.2s ease 1.2s infinite;
|
|
}
|
|
|
|
.h4 {
|
|
right: 0;
|
|
animation: load4 7.2s ease 1.8s infinite;
|
|
}
|
|
|
|
.h5 {
|
|
left: 0;
|
|
animation: load5 7.2s ease 2.4s infinite;
|
|
}
|
|
|
|
.h6 {
|
|
left: 0;
|
|
animation: load6 7.2s ease 3s infinite;
|
|
}
|
|
|
|
@keyframes load1 {
|
|
0% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.944444433% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{top:0;height:0%;} */
|
|
}
|
|
|
|
@keyframes load2 {
|
|
0% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.944444433% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{bottom:0;height:0%} */
|
|
}
|
|
|
|
@keyframes load3 {
|
|
0% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.94444443% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{bottom:0;height:0%;} */
|
|
}
|
|
|
|
@keyframes load4 {
|
|
0% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.94444443% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{bottom:0;height:0%;} */
|
|
}
|
|
|
|
@keyframes load5 {
|
|
0% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.94444443% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{top:0;height:0%;} */
|
|
}
|
|
|
|
@keyframes load6 {
|
|
0% {
|
|
bottom: 0;
|
|
height: 0
|
|
}
|
|
|
|
6.944444444% {
|
|
bottom: 0;
|
|
height: 100%
|
|
}
|
|
|
|
50% {
|
|
top: 0;
|
|
height: 100%
|
|
}
|
|
|
|
59.94444443% {
|
|
top: 0;
|
|
height: 0
|
|
}
|
|
/* 91.6666667%{top:0;height:0%;} */
|
|
}
|
|
|
|
|
|
</style>
|