web/repo: the loading strip's stripes move by transform on the compositor, so they keep moving while a page's main thread is busy
Signed-off-by: dawn <dawn@tangled.org>
432 unmodified linesExpand all433434435436437438439439440440441442443444445446447448449450451452453454455456457458459460461451462463464465466150 unmodified linesExpand all432 unmodified linesExpand all right: 0; /* over the pane's sticky heads (the log's day heads, a file's header), under its menus */ z-index: 35; height: 4px; overflow: hidden; opacity: 0; pointer-events: none; background: repeating-linear-gradient(90deg, var(--y-accent) 0 32px, transparent 32px 64px) 0 0 / 64px 100%; mask: var(--y-dz-top) 0 0 / 8px 12px repeat-x; } /* the stripes move by transform, which the compositor runs, so they keep moving while either page's main thread is busy: the old one leaving, the new one starting its app */ .prog::before { content: ""; position: absolute; inset: 0 0 0 -64px; background: repeating-linear-gradient(90deg, var(--y-accent) 0 32px, transparent 32px 64px); } .prog.on, :global(html[data-loading]) .prog, :global(html[data-suspended]) .prog { opacity: 1; } .prog.on::before, :global(html[data-loading]) .prog::before, :global(html[data-suspended]) .prog::before { animation: prog 0.8s steps(32) infinite; } @keyframes prog { to { background-position: 64px 0; transform: translateX(64px); } } .body { position: relative;150 unmodified linesExpand all