fediblock-instance/public/loaders.css

413 lines
11 KiB
CSS
Raw Permalink Normal View History

2024-09-15 17:44:53 +00:00
/* HTML: <div class="loader"></div> */
.loader-pong {
width: 80px;
height: 70px;
border: 5px solid #000;
padding: 0 8px;
box-sizing: border-box;
background:
linear-gradient(#fff 0 0) 0 0/8px 20px,
linear-gradient(#fff 0 0) 100% 0/8px 20px,
radial-gradient(farthest-side, #fff 90%, #0000) 0 5px/8px 8px content-box,
#000;
background-repeat: no-repeat;
animation: l3 2s infinite linear;
}
@keyframes l3 {
25% {
background-position: 0 0, 100% 100%, 100% calc(100% - 5px)
}
50% {
background-position: 0 100%, 100% 100%, 0 calc(100% - 5px)
}
75% {
background-position: 0 100%, 100% 0, 100% 5px
}
}
/* HTML: <div class="loader"></div> */
.loader-pacman {
width: 90px;
height: 24px;
padding: 2px 0;
box-sizing: border-box;
display: flex;
animation: l5-0 3s infinite steps(6);
background:
linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
radial-gradient(circle 3px, #eeee89 90%, #0000) 0 0/20% 100% #000;
overflow: hidden;
}
.loader-pacman::before {
content: "";
width: 20px;
transform: translate(-100%);
border-radius: 50%;
background: #ffff2d;
animation:
l5-1 .25s .153s infinite steps(5) alternate,
l5-2 3s infinite linear;
}
@keyframes l5-1 {
0% {
clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%)
}
100% {
clip-path: polygon(50% 50%, 100% 65%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 35%)
}
}
@keyframes l5-2 {
100% {
transform: translate(90px)
}
}
@keyframes l5-0 {
100% {
background-size: 120% 100%, 20% 100%
}
}
/* HTML: <div class="loader"></div> */
.loader-abyss {
width: 80px;
height: 60px;
box-sizing: border-box;
background:
linear-gradient(#fff 0 0) left /calc(50% - 15px) 8px no-repeat,
linear-gradient(#fff 0 0) right/calc(50% - 15px) 8px no-repeat,
conic-gradient(from 135deg at top, #0000, red 1deg 90deg, #0000 91deg) bottom/14px 8px repeat-x,
#000;
border-bottom: 2px solid red;
position: relative;
overflow: hidden;
animation: l6-0 1s infinite linear;
}
.loader-abyss::before {
content: "";
position: absolute;
width: 10px;
height: 14px;
background: lightblue;
left: -5px;
animation:
l6-1 2s infinite cubic-bezier(0, 100, 1, 100),
l6-2 2s infinite linear;
}
@keyframes l6-0 {
50% {
background-position: left, right, bottom -2px left -4px
}
}
@keyframes l6-1 {
0%,
27% {
bottom: calc(50% + 4px)
}
65%,
100% {
bottom: calc(50% + 4.1px)
}
}
@keyframes l6-2 {
100% {
left: 100%
}
}
/* HTML: <div class="loader"></div> */
.loader-jump {
width: 70px;
height: 50px;
box-sizing: border-box;
background:
conic-gradient(from 135deg at top, #0000, #fff 1deg 90deg, #0000 91deg) right -20px bottom 8px/18px 9px,
linear-gradient(#fff 0 0) bottom/100% 8px,
#000;
background-repeat: no-repeat;
border-bottom: 8px solid #000;
position: relative;
animation: l7-0 2s infinite linear;
}
.loader-jump::before {
content: "";
position: absolute;
width: 10px;
height: 14px;
background: lightblue;
left: 10px;
animation: l7-1 2s infinite cubic-bezier(0, 200, 1, 200);
}
@keyframes l7-0 {
100% {
background-position: left -20px bottom 8px, bottom
}
}
@keyframes l7-1 {
0%,
50% {
bottom: 8px
}
90%,
100% {
bottom: 8.1px
}
}
/* HTML: <div class="loader"></div> */
.loader-loading {
width: fit-content;
font-size: 17px;
font-family: monospace;
line-height: 1.4;
font-weight: bold;
--c: no-repeat linear-gradient(#000 0 0);
background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
background-size: calc(1ch + 1px) 100%;
border-bottom: 10px solid #0000;
position: relative;
animation: l8-0 3s infinite linear;
clip-path: inset(-20px 0);
}
.loader-loading::before {
content: "Loading";
}
.loader-loading::after {
content: "";
position: absolute;
width: 10px;
height: 14px;
background: #25adda;
left: -10px;
bottom: 100%;
animation: l8-1 3s infinite linear;
}
@keyframes l8-0 {
0%,
12.5% {
background-position: calc(0*100%/6) 0, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
}
25% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
}
37.5% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
}
50% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
}
62.5% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
}
75% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 0, calc(6*100%/6) 0
}
87.4% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 0
}
100% {
background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 40px
}
}
@keyframes l8-1 {
100% {
left: 115%
}
}
/* HTML: <div class="loader"></div> */
.loader-avenger {
width: fit-content;
font-size: 17px;
font-family: monospace;
line-height: 1.4;
font-weight: bold;
background:
linear-gradient(#000 0 0) left,
linear-gradient(#000 0 0) right;
background-repeat: no-repeat;
border-right: 5px solid #0000;
border-left: 5px solid #0000;
background-origin: border-box;
position: relative;
animation: l9-0 2s infinite;
}
.loader-avenger::before {
content: "Loading";
}
.loader-avenger::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 22px;
height: 60px;
background:
linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0) bottom /22px 20px,
linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px left 0/22px 6px,
linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
background-repeat: no-repeat;
animation: l9-1 2s infinite;
}
@keyframes l9-0 {
0%,
25% {
background-size: 50% 100%
}
25.1%,
75% {
background-size: 0 0, 50% 100%
}
75.1%,
100% {
background-size: 0 0, 0 0
}
}
@keyframes l9-1 {
25% {
background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
left: 0
}
25.1% {
background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
left: 0
}
50% {
background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
left: calc(100% - 22px)
}
75% {
background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
left: calc(100% - 22px)
}
75.1% {
background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
left: calc(100% - 22px)
}
}
/* HTML: <div class="loader"></div> */
.loader-mario {
width: fit-content;
font-size: 17px;
font-family: monospace;
line-height: 1.4;
font-weight: bold;
padding: 30px 2px 50px;
background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat;
position: relative;
overflow: hidden;
animation: l10-0 2s infinite cubic-bezier(1, 175, .5, 175);
}
.loader-mario::before {
content: "Loading";
display: inline-block;
animation: l10-2 2s infinite;
}
.loader-mario::after {
content: "";
position: absolute;
width: 34px;
height: 28px;
top: 110%;
left: calc(50% - 16px);
background:
linear-gradient(90deg, #0000 12px, #f92033 0 22px, #0000 0 26px, #fdc98d 0 32px, #0000) bottom 26px left 50%,
linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0) bottom 24px left 50%,
linear-gradient(90deg, #0000 10px, #643700 0 16px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 24px, #000 0 26px, #f92033 0 32px, #0000 0) bottom 22px left 50%,
linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 14px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 28px, #f92033 0 32px, #0000 0) bottom 20px left 50%,
linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 16px, #fdc98d 0 22px, #000 0 24px, #fdc98d 0 30px, #f92033 0 32px, #0000 0) bottom 18px left 50%,
linear-gradient(90deg, #0000 8px, #643700 0 12px, #fdc98d 0 20px, #000 0 28px, #f92033 0 30px, #0000 0) bottom 16px left 50%,
linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0) bottom 14px left 50%,
linear-gradient(90deg, #fdc98d 6px, #f92033 0 14px, #222a87 0 16px, #f92033 0 22px, #222a87 0 24px, #f92033 0 28px, #0000 0 32px, #643700 0) bottom 12px left 50%,
linear-gradient(90deg, #fdc98d 6px, #f92033 0 16px, #222a87 0 18px, #f92033 0 24px, #f92033 0 26px, #0000 0 30px, #643700 0) bottom 10px left 50%,
linear-gradient(90deg, #0000 10px, #f92033 0 16px, #222a87 0 24px, #feee49 0 26px, #222a87 0 30px, #643700 0) bottom 8px left 50%,
linear-gradient(90deg, #0000 12px, #222a87 0 18px, #feee49 0 20px, #222a87 0 30px, #643700 0) bottom 6px left 50%,
linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0) bottom 4px left 50%,
linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0) bottom 2px left 50%,
linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0px left 50%;
background-size: 34px 2px;
background-repeat: no-repeat;
animation: inherit;
animation-name: l10-1;
}
@keyframes l10-0 {
0%,
30% {
background-position: 0 0px
}
50%,
100% {
background-position: 0 -0.1px
}
}
@keyframes l10-1 {
50%,
100% {
top: 109.5%
}
;
}
@keyframes l10-2 {
0%,
30% {
transform: translateY(0);
}
80%,
100% {
transform: translateY(-260%);
}
}