mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
59 lines
1.4 KiB
HTML
59 lines
1.4 KiB
HTML
<ul class="loader">
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<style>
|
|
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
|
|
@keyframes pound {
|
|
to {
|
|
transform: scale(1.2);
|
|
box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45)
|
|
}
|
|
}
|
|
|
|
ul.loader {
|
|
display: block;
|
|
position: relative;
|
|
width: 5em;
|
|
}
|
|
|
|
.loader li {
|
|
list-style: none;
|
|
display: block;
|
|
float: left;
|
|
width: 0.5em;
|
|
height: 3em;
|
|
margin: 0 0.5em 0 0;
|
|
background: #635863;
|
|
background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863), color-stop(100%,#3d353b));
|
|
background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%);
|
|
background: -o-linear-gradient(top, #635863 0%,#3d353b 100%);
|
|
background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%);
|
|
background: linear-gradient(to bottom, #635863 0%,#3d353b 100%);
|
|
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);
|
|
animation: pound .7s ease-in-out infinite alternate;
|
|
animation-delay: 0.05s;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.loader li:nth-child(2) {
|
|
animation-delay: 0.20s;
|
|
}
|
|
|
|
.loader li:nth-child(3) {
|
|
animation-delay: 0.35s;
|
|
}
|
|
|
|
.loader li:nth-child(4) {
|
|
animation-delay: 0.50s;
|
|
}
|
|
|
|
.loader li:nth-child(5) {
|
|
animation-delay: 0.65s;
|
|
}
|
|
|
|
</style>
|