boredgame/src/lib/components/Loading.svelte

66 lines
1.5 KiB
Svelte

<div class="loadingio-spinner-cube-ndtzkv0srwf">
<div class="ldio-t5osv9zw79">
<div />
<div />
<div />
<div />
</div>
</div>
<style lang="css">
@keyframes ldio-t5osv9zw79 {
0% {
transform: scale(1.1500000000000001);
}
100% {
transform: scale(1);
}
}
.ldio-t5osv9zw79 div {
position: absolute;
width: 80px;
height: 80px;
top: 13.333333333333336px;
left: 13.333333333333336px;
background: #e15b64;
animation: ldio-t5osv9zw79 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
animation-delay: -0.3s;
}
.ldio-t5osv9zw79 div:nth-child(2) {
top: 13.333333333333336px;
left: 106.66666666666666px;
background: #f47e60;
animation-delay: -0.2s;
}
.ldio-t5osv9zw79 div:nth-child(3) {
top: 106.66666666666666px;
left: 13.333333333333336px;
background: #abbd81;
animation-delay: 0s;
}
.ldio-t5osv9zw79 div:nth-child(4) {
top: 106.66666666666666px;
left: 106.66666666666666px;
background: #f8b26a;
animation-delay: -0.1s;
}
.loadingio-spinner-cube-ndtzkv0srwf {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
background: none;
}
.ldio-t5osv9zw79 {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-t5osv9zw79 div {
box-sizing: content-box;
}
/* generated by https://loading.io/ */
</style>