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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Source => https://w3collective.com/skeleton-loading-screen/