fregante / fregante/abort-utils

Update demo gif

Open
#6 0 comments 0 reactions 1 assignee Claimed by @fregante View on GitHub
Dominant language
TypeScript
Stars
162
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Codepen won't let me log in today. I wrote this partial demo and I'll finish it when they let me again

```html

onAbort(, , , )



new ReusableAbortController() =>

mergeSignals(, , , ) =>

fregante/abort-utils
```

```css
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
font: 3vmin / 1 Menlo, monospace;
flex-wrap: wrap;
}

h2 {
display: flex;
align-items: flex-end;
margin-top: 4em;
span {
margin-inline: 0.3em;
}
}

controller {
display: inline-flex;
justify-content: center;
box-shadow: 0 0 5px #103a6188;
box-sizing: border-box;
background: #103a61;
border: solid 2px #103a61;
border-radius: 50%;
width: 2em;
height: 2em;
margin-bottom: -0.5em;
}

signal {
display: block;
box-sizing: border-box;
background: #f9f2c5;
border: solid 2px #ffcf14;
box-shadow: 0 0 5px #ffcf14;
border-radius: 0.5em;
width: 1em;
height: 1em;

controller & {
margin-top: -0.8em;
z-index: -1;
height: 1.5em;
}
}

function {
display: block;
box-sizing: border-box;
background: #006600;

box-shadow: 0 0 5px #006600;
transform: skewX(-12deg);
padding: 0.2em 0.2em 0.3em;
margin-left: 0.3em;
&::before {
display: block;
content: '𝑓';
font-weight: bold;
color: white;
transform: skewX(12deg);
}
}

footer {
width: 100%;
text-align: center;
font-size: 1rem;
padding-block: 3rem;
}

a {
color: gray;
}

.on-abort > signal,
.merge-signals signal:nth-child(3),
.merge-signals signal:nth-child(6) {
animation: 0.1s 2s signal-aborted forwards;
}

.merge-signals signal:nth-child(6) {
animation-delay: 2.3s;
}

.on-abort > controller,
.link-controllers controller {
animation: 0.1s 2s controller-aborted forwards;
signal {
animation: 0.1s 2.1s signal-aborted forwards;
}
}

.link-controllers controller:nth-child(1) {
animation-delay: 2.3s;
signal {
animation: 0.1s 2.4s signal-aborted forwards;
}
}

.on-abort > controller,
.link-controllers controller:nth-child(2) {
animation-delay: 2.6s;
signal {
animation: 0.1s 2.7s signal-aborted forwards;
}
}

function {
animation: 0.1s 2.2s controller-aborted forwards;
}

function:nth-child(3) {
animation-delay: 2.4s;
}

@keyframes signal-aborted {
to {
background: #fe6a3a;
border-color: #ff5413;
box-shadow: 0 0 5px #ff5413;
}
}

@keyframes controller-aborted {
to {
background: #a43221;
border-color: #a43221;
box-shadow: 0 0 5px #ff5413;
}
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.