Add loading skeleton
This commit is contained in:
Elias Schriefer
parent
8810bfa53f
commit
20c4524bba
@ -1,7 +1,9 @@
|
||||
@import url("./main.css");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
|
||||
|
||||
:root {
|
||||
--min-card-size: min(60ch, calc(100vw - var(--pad-main)));
|
||||
--rating-color: gold;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -80,19 +82,25 @@ header {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
height: 1em;
|
||||
margin-block: calc(-1 * (1lh - 1.25em));
|
||||
height: 1lh;
|
||||
vertical-align: bottom;
|
||||
margin-inline: .5ch;
|
||||
mask-image: url("stars.svg");
|
||||
-webkit-mask-image: url("stars.svg");
|
||||
mask-size: 100% 100%;
|
||||
mask-mode: alpha;
|
||||
--rating-percent: calc((var(--rating, 0) / 5) * 100%);
|
||||
background: linear-gradient(to right, gold var(--rating-percent), var(--bg-color) var(--rating-percent));
|
||||
background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
--text-color: var(--accent-color);
|
||||
|
||||
/*
|
||||
Why doesn't it do this automatically? It is inherited from body,
|
||||
so I should be able to just change --text-color, right?
|
||||
*/
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#terms-of-use {
|
||||
@ -121,4 +129,52 @@ a {
|
||||
br {
|
||||
margin-bottom: .5lh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
font-family: "Flow Circular";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
user-select: none;
|
||||
--rating-color: var(--text-color);
|
||||
|
||||
a, .btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
@media screen and not (prefers-reduced-motion) {
|
||||
:is(header, section) > :is(p, span, h1, a) {
|
||||
animation: infinite 2s linear skeleton-loading;
|
||||
background: radial-gradient(
|
||||
circle farthest-side,
|
||||
var(--highlight-color, white) 20%,
|
||||
var(--text-color) 40%
|
||||
) no-repeat, var(--text-color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&:is(a) {
|
||||
--highlight-color: color-mix(in oklab, white, var(--text-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#title::after {
|
||||
color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
from {
|
||||
background-position-x: calc(-1.4 * var(--min-card-size)), 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position-x: calc(1.4 * var(--min-card-size)), 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,22 +4,25 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dataset details</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" crossorigin>
|
||||
<link rel="stylesheet" href="details.css">
|
||||
<script defer type="module" src="details.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<main class="skeleton">
|
||||
<header data-id="dataset-id">
|
||||
<h1 id="title" data-type="api">Title</h1>
|
||||
<span>
|
||||
<span id="rating" style="--rating: 3.5">3.5</span>
|
||||
<span id="rating" style="--rating: 4">4</span>
|
||||
<span id="short-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.</span>
|
||||
</span>
|
||||
<a href="#" id="url">https://example.com/dataset</a>
|
||||
<a id="url">https://example.com/dataset</a>
|
||||
<aside class="upvote">
|
||||
<button class="upvote-btn btn flat">Upvote</button>
|
||||
<button disabled class="upvote-btn btn flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn btn flat">Downvote</button>
|
||||
<button disabled class="downvote-btn btn flat">Downvote</button>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
@ -27,7 +30,7 @@
|
||||
<span>Added on: <span id="date" data-date="0">1. January 1970</span></span>
|
||||
<span>Category: <span id="category">Something</span></span>
|
||||
<span>License: <span id="license">MIT</span></span>
|
||||
<a href="#" id="terms-of-use">Terms of Use</a>
|
||||
<a id="terms-of-use">Terms of Use</a>
|
||||
</section>
|
||||
|
||||
<section id="details">
|
||||
|
||||
@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DataDash</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script type="module" src="main.js" defer></script>
|
||||
</head>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user