zetikettes/frontend/placeholder.css
Paul Mathieu 6a05e46946 Moving fast and breaking things
This is a first commit in preparation for 2.0

- now using prototempaltes™
- updated README
- makefile for some nice shortcuts
- add new tikettes
- remove tikettes

Things that don't work (yet)
- authentication on the main frontend (there is none)
- generating PDFs
2025-08-05 15:14:25 +02:00

48 lines
807 B
CSS

/*
* Read the blog post here:
* https://letsbuildui.dev/articles/how-to-build-a-skeleton-loading-placeholder
*/
.faux-text {
background: #dddddd;
border-radius: 4px;
height: 20px;
margin-bottom: 5px;
width: 100%;
}
.faux-text.short {
width: 75%;
}
.faux-text.shorter {
width: 55%;
}
.shimmer {
overflow: hidden;
position: relative;
}
.shimmer::before {
content: "";
position: absolute;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
height: 100%;
width: 100%;
z-index: 1;
animation: shimmer 1s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}