Skip to content

Instantly share code, notes, and snippets.

@wavebeem
Created February 23, 2023 22:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wavebeem/00865802010049852ab4ee9ef6839815 to your computer and use it in GitHub Desktop.
Save wavebeem/00865802010049852ab4ee9ef6839815 to your computer and use it in GitHub Desktop.
<script>
const html = String.raw;
const spinner = "߷";
function createDetails(n) {
if (n <= 0) {
return "<div class='end'>End</div>";
}
return html`<details>
<summary>${spinner}</summary>
<div class='content'>${createDetails(n - 1)}</div>
</details>`;
}
export const details = createDetails(100);
</script>
<div class="container">
{@html details}
</div>
details {
font-size: 8rem;
user-select: none;
position: relative;
color: black;
background: rgb(255 255 255 / 75%);
}
summary {
list-style: none;
pointer-events: initial;
color: rgb(0 0 0 / 85%);
}
.container {
margin-left: 4rem;
}
.content {
animation: 500ms spin ease;
position: absolute;
z-index: 10;
top: 0;
left: 0;
pointer-events: none;
background: rgb(255 255 255 / 15%);
}
.end {
color: red;
background: white;
pointer-events: initial;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment