Skip to content

Instantly share code, notes, and snippets.

@leaysgur

leaysgur/index.html

Created June 14, 2021 12:46
Show Gist options
  • Save leaysgur/6779caf2627322cf923d3b98c8f060c7 to your computer and use it in GitHub Desktop.
Save leaysgur/6779caf2627322cf923d3b98c8f060c7 to your computer and use it in GitHub Desktop.
Download ZIP
CSS only loading
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Loading...</title>
</head>
<body class="loading">
</body>
</html>
Raw
style.css
:root {
--color-brand: #673ab8;
--color-brand-light: #f1e9ff;
}
html,
body {
margin: 0;
min-height: 100%;
font-family: system-ui, sans-serif;
}
body::before {
content: '';
display: block;
position: fixed;
left: 0;
top: -2px;
width: 100%;
height: 2px;
background: linear-gradient(to right, var(--color-brand), var(--color-brand)) no-repeat 0 0;
opacity: 0;
transition: all 300ms ease;
z-index: 999;
pointer-events: none;
}
body.loading::before {
transform: translateY(2px);
opacity: 1;
transition: all 1s ease 1s;
animation: page-loading 4s forwards ease-out 1;
}
@keyframes page-loading {
0% { background-position: -100vw 0; }
25% { background-position: -100vw 0; }
}
@leaysgur
Copy link
Author

from https://github.com/preactjs/wmr/blob/main/examples/demo/public/style.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment