w3collective/skeleton-loading-screen.html

## skeleton-loading-screen.html
<!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>
	<!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>