Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS skeleton loading screen animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton loading screen</title>
<style>
.video:empty {
width: 315px;
height: 250px;
cursor: progress;
background:
linear-gradient(0.25turn, transparent, #fff, transparent),
linear-gradient(#eee, #eee),
radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
linear-gradient(#eee, #eee);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
background-position: 315px 0, 0 0, 0 190px, 50px 195px;
}
}
</style>
</head>
<body>
<div class="video"></div>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Mar 25, 2021

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