mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-04-05 22:38:53 +08:00
63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Document</title>
|
|
<style>
|
|
body {
|
|
background: #f3f3f3;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
width: 400px;
|
|
margin: 30px auto;
|
|
padding: 30px;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,.2);
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
.gradient {
|
|
fill: #999;
|
|
fill:url(#gradient)
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
<?xml version="1.0" standalone="no"?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
<svg viewBox = "0 0 400 130" version = "1.1">
|
|
<!-- base -->
|
|
<rect class="gradient" x="0" y="0" rx="5" ry="5" width="70" height="70" fill="#eee" stroke-width="0"/>
|
|
|
|
<!-- line -->
|
|
<rect class="gradient" x="80" y="17" rx="4" ry="4" width="300" height="13" fill="#eee" stroke-width="0"/>
|
|
<rect class="gradient" x="80" y="40" rx="3" ry="3" width="250" height="10" fill="#eee" stroke-width="0"/>
|
|
|
|
<!-- group line -->
|
|
<rect class="gradient" x="0" y="80" rx="3" ry="3" width="350" height="10" fill="#eee" stroke-width="0"/>
|
|
<rect class="gradient" x="0" y="100" rx="3" ry="3" width="400" height="10" fill="#eee" stroke-width="0"/>
|
|
<rect class="gradient" x="0" y="120" rx="3" ry="3" width="360" height="10" fill="#eee" stroke-width="0"/>
|
|
|
|
<defs>
|
|
<linearGradient id="gradient">
|
|
<stop offset="0%" stop-color="#f3f3f3">
|
|
<animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite" />
|
|
</stop>
|
|
<stop offset="50%" stop-color="#eeecec">
|
|
<animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite" />
|
|
</stop>
|
|
<stop offset="100%" stop-color="#f3f3f3">
|
|
<animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite" />
|
|
</stop>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |