mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
1.5 KiB
HTML
79 lines
1.5 KiB
HTML
<div class="loader">
|
|
<span class="item"></span>
|
|
<span class="item"></span>
|
|
<span class="item"></span>
|
|
<span class="item"></span>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by RoninLJY - Tags: loader, css, easy to use */
|
|
.loader {
|
|
width: 85px;
|
|
height: 85px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
animation: loading-rotate 3s linear infinite;
|
|
}
|
|
|
|
.item {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.item:nth-of-type(1) {
|
|
background-color: #50DE68;
|
|
border-radius: 20px 20px 0 20px;
|
|
border-left: #ffffff 4px solid;
|
|
border-top: #f7f7f7 4px solid;
|
|
}
|
|
|
|
.item:nth-of-type(2) {
|
|
background-color: rgb(32, 80, 46);
|
|
border-radius: 20px 20px 20px 0;
|
|
border-right: #ffffff 4px solid;
|
|
border-top: #f7f7f7 4px solid;
|
|
}
|
|
|
|
.item:nth-of-type(3) {
|
|
background-color: rgb(0, 255, 55);
|
|
border-radius: 20px 0 20px 20px;
|
|
border-left: #ffffff 4px solid;
|
|
border-bottom: #f7f7f7 4px solid;
|
|
}
|
|
|
|
.item:nth-of-type(4) {
|
|
background-color: rgb(32, 182, 32);
|
|
border-radius: 0 20px 20px 20px;
|
|
border-right: #ffffff 4px solid;
|
|
border-bottom: #f7f7f7 4px solid;
|
|
}
|
|
|
|
@keyframes loading-rotate {
|
|
0% {
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
|
|
20% {
|
|
transform: scale(1) rotate(72deg);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(0.5) rotate(144deg);
|
|
}
|
|
|
|
60% {
|
|
transform: scale(0.5) rotate(216deg);
|
|
}
|
|
|
|
80% {
|
|
transform: scale(1) rotate(288deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|