Windows 95 Copy Dialog
A Windows 95 copy dialog: a page flies between folders while the block progress bar fills chunk by chunk and the seconds left count down. Crisp 1px bevels from inset box-shadows, no images.
Also known as: win95 css, windows 95 css, windows 95 progress bar, retro dialog box css.
HTML
<div class="txt-win95-copy-dialog" aria-label="Copying Q3 Report.doc to A:, about 5 seconds left">
<div class="txt-win95-copy-dialog-title" aria-hidden="true"><span>Copying...</span><span class="txt-win95-copy-dialog-x">✕</span></div>
<div class="txt-win95-copy-dialog-body" aria-hidden="true">
<div class="txt-win95-copy-dialog-anim"><span class="txt-win95-copy-dialog-folder"></span><span class="txt-win95-copy-dialog-page"></span><span class="txt-win95-copy-dialog-folder"></span></div>
<p>Q3 Report.doc</p>
<p>From 'Reports' to 'A:\'</p>
<span class="txt-win95-copy-dialog-bar"><span class="txt-win95-copy-dialog-fill"></span></span>
<p class="txt-win95-copy-dialog-left"></p>
</div>
</div>CSS
@property --txt-win95-copy-dialog-n {
syntax: "<integer>";
initial-value: 1;
inherits: false;
}
.txt-win95-copy-dialog {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 0.48);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: inline-block;
width: 19em;
padding: 0.25em;
font-family: Tahoma, "MS Sans Serif", "Segoe UI", system-ui, sans-serif;
font-weight: 400;
color: #000;
background: #c0c0c0;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 0 0.6em 1.4em -0.6em rgb(0 0 0 / 0.45);
--navy: color-mix(in srgb, var(--c) 20%, #000080);
--t: 6s;}
.txt-win95-copy-dialog-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.6em;
padding: 0 0.15em 0 0.35em;
font-weight: 700;
color: #fff;
background: linear-gradient(90deg, var(--navy), color-mix(in srgb, var(--c) 20%, #1084d0));
}
.txt-win95-copy-dialog-x {
display: grid;
place-items: center;
width: 1.25em;
height: 1.1em;
font-size: 0.85em;
color: #000;
background: #c0c0c0;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080;
}
.txt-win95-copy-dialog-body {
display: grid;
gap: 0.25em;
padding: 0.5em 0.75em 0.6em;
}
.txt-win95-copy-dialog-body p { margin: 0; }
.txt-win95-copy-dialog-anim {
position: relative;
display: flex;
justify-content: space-between;
width: 12em;
height: 1.9em;
margin: 0 auto 0.15em;
}
.txt-win95-copy-dialog-folder {
align-self: end;
position: relative;
width: 2em;
height: 1.35em;
background: linear-gradient(#ffe48a, #e9b830);
box-shadow: inset 0 0 0 1px #6b5200;
}
.txt-win95-copy-dialog-folder::before {
content: "";
position: absolute;
left: 0;
top: -0.3em;
width: 0.9em;
height: 0.35em;
background: #ffe48a;
box-shadow: inset 1px 1px 0 #6b5200, inset -1px 0 0 #6b5200;
}
.txt-win95-copy-dialog-page {
position: absolute;
left: 1.3em;
top: 0.9em;
width: 0.8em;
height: 1em;
background: #fff;
box-shadow: inset 0 0 0 1px #000, inset 0.15em 0.3em 0 -0.1em #fff, inset 0 0.35em 0 -0.29em #808080;
animation: txt-win95-copy-dialog-fly 0.9s steps(9) infinite;
}
.txt-win95-copy-dialog-bar {
display: block;
width: 15em;
height: 1.3em;
padding: 0.2em;
background: #fff;
box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}
.txt-win95-copy-dialog-fill {
display: block;
height: 100%;
width: 0;
background: repeating-linear-gradient(90deg, var(--navy) 0 0.6em, transparent 0 0.75em);
animation: txt-win95-copy-dialog-fill var(--t) infinite;
}
.txt-win95-copy-dialog-left {
counter-reset: txt-win95-copy-dialog-n var(--txt-win95-copy-dialog-n);
animation: txt-win95-copy-dialog-n var(--t) step-end infinite;
}
.txt-win95-copy-dialog-left::before {
content: "Time left: 0:0" counter(txt-win95-copy-dialog-n);
}
@keyframes txt-win95-copy-dialog-fly {
0% { transform: translate(0, 0) rotate(0); }
50% { transform: translate(4.3em, -0.85em) rotate(14deg); }
100% { transform: translate(8.6em, 0) rotate(0); }
}
@keyframes txt-win95-copy-dialog-fill {
0% { width: 0; animation-timing-function: steps(10, end); }
45% { width: 7.5em; animation-timing-function: steps(10, end); }
85%, 100% { width: 15em; }
}
@keyframes txt-win95-copy-dialog-n {
0% { --txt-win95-copy-dialog-n: 6; }
17% { --txt-win95-copy-dialog-n: 5; }
33% { --txt-win95-copy-dialog-n: 4; }
50% { --txt-win95-copy-dialog-n: 3; }
66% { --txt-win95-copy-dialog-n: 2; }
80% { --txt-win95-copy-dialog-n: 1; }
}
@media (prefers-reduced-motion: reduce) {
.txt-win95-copy-dialog, .txt-win95-copy-dialog *, .txt-win95-copy-dialog *::before, .txt-win95-copy-dialog *::after { animation: none !important; }
.txt-win95-copy-dialog-fill { width: 13.5em; }
}
@media (prefers-reduced-motion: reduce) {
.txt-win95-copy-dialog, .txt-win95-copy-dialog *, .txt-win95-copy-dialog::before, .txt-win95-copy-dialog::after, .txt-win95-copy-dialog *::before, .txt-win95-copy-dialog *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.