mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
39 lines
1,016 B
HTML
39 lines
1,016 B
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by Shoh2008 - Tags: loader */
|
|
.loader {
|
|
width: 215px;
|
|
height: 215px;
|
|
display: block;
|
|
margin: auto;
|
|
position: relative;
|
|
background: #FFF;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.loader::after {
|
|
content: '';
|
|
width: calc(100% - 30px);
|
|
height: calc(100% - 30px);
|
|
top: 15px;
|
|
left: 15px;
|
|
position: absolute;
|
|
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
|
|
radial-gradient(circle 50px , #DDD 100%, transparent 0),
|
|
linear-gradient(#DDD 16px, transparent 0),
|
|
linear-gradient(#DDD 24px, transparent 0);
|
|
background-repeat: no-repeat;
|
|
background-size: 75px 175px, 100% 100px, 80% 16px, 80% 16px;
|
|
background-position: -185px 0, center 10px, center 125px, center 155px;
|
|
box-sizing: border-box;
|
|
animation: animloader 1s linear infinite;
|
|
}
|
|
|
|
@keyframes animloader {
|
|
to {
|
|
background-position: 185px 0, center 10px, center 125px, center 155px;
|
|
}
|
|
}
|
|
|
|
</style>
|