پیشنمایش زنده
کد HTML
<div class="loader">
<div class="header">
<div class="avatar"></div>
<div class="info">
<div class="nickname"></div>
<div class="signature"></div>
</div>
</div>
<div class="qr-code">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
class="qr-icon"
>
<path
d="M392.6 544.256a102.4 102.4 0 0 1 102.4 102.4V885.76a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V646.656a102.4 102.4 0 0 1 102.4-102.4h239zm521.5 214.272a43.52 43.52 0 0 1 43.16 38.092l0.36 5.427v136.704a43.52 43.52 0 0 1-86.68 5.478l-0.36-5.427v-136.704c0-24.064 19.456-43.52 43.52-43.52zm-295.8 0a43.52 43.52 0 0 1 43.16 38.092l0.36 5.427v136.704a43.52 43.52 0 0 1-86.73 5.478l-0.31-5.427v-136.704c0-24.064 19.456-43.52 43.52-43.52zm147.9 47.514a43.52 43.52 0 0 1 43.16 38.04l0.36 5.48v89.24a43.52 43.52 0 0 1-86.73 5.428l-0.31-5.428v-89.24c0-24.064 19.456-43.52 43.52-43.52zM392.6 615.936H153.6a30.72 30.72 0 0 0-30.31 25.754l-0.41 4.966v239a30.72 30.72 0 0 0 25.75 30.31l4.97 0.41h239a30.72 30.72 0 0 0 30.31-25.754l0.41-4.966V646.656a30.72 30.72 0 0 0-25.75-30.31l-4.97-0.41zm-71.17 76.288a25.6 25.6 0 0 1 25.6 25.6v96.666a25.6 25.6 0 0 1-25.6 25.6H224.768a25.6 25.6 0 0 1-25.6-25.6V717.824a25.6 25.6 0 0 1 25.6-25.6h96.768zm444.774-92.877a43.52 43.52 0 0 1 43.16 38.04l0.36 5.48v98.61a43.52 43.52 0 0 1-86.73 5.478l-0.31-5.478v-98.61c0-24.064 19.456-43.52 43.52-43.52zm-147.97 0a43.52 43.52 0 0 1 43.21 38.04l0.36 5.48v49.305a43.52 43.52 0 0 1-86.73 5.478l-0.31-5.478v-49.305c0-24.064 19.456-43.52 43.52-43.52zm295.885 0a43.52 43.52 0 0 1 43.16 38.04l0.36 5.48v49.305a43.52 43.52 0 0 1-86.68 5.478l-0.36-5.478v-49.305c0-24.064 19.456-43.52 43.52-43.52zM392.6 51.2a102.4 102.4 0 0 1 102.4 102.4v239a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h239zm493.056 0a102.4 102.4 0 0 1 102.4 102.4v239a102.4 102.4 0 0 1-102.4 102.4h-239a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h239zm-493.056 71.68H153.6a30.72 30.72 0 0 0-30.31 25.754L122.88 153.6v239a30.72 30.72 0 0 0 25.75 30.31l4.97 0.41h239a30.72 30.72 0 0 0 30.31-25.754l0.41-4.966V153.6a30.72 30.72 0 0 0-25.75-30.31l-4.97-0.41zm493.056 0h-239a30.72 30.72 0 0 0-30.31 25.754L615.936 153.6v239a30.72 30.72 0 0 0 25.75 30.31l4.97 0.41h239a30.72 30.72 0 0 0 30.31-25.754l0.41-4.966V153.6a30.72 30.72 0 0 0-25.75-30.31l-4.97-0.41zM321.485 199.168a25.6 25.6 0 0 1 25.6 25.6v96.717a25.6 25.6 0 0 1-25.6 25.6H224.768a25.6 25.6 0 0 1-25.6-25.6v-96.768a25.6 25.6 0 0 1 25.6-25.6h96.768zm493.107 0a25.6 25.6 0 0 1 25.6 25.6v96.717a25.6 25.6 0 0 1-25.6 25.6H717.824a25.6 25.6 0 0 1-25.6-25.6v-96.768a25.6 25.6 0 0 1 25.6-25.6h96.768z"
></path>
</svg>
</div>
</div>
کد CSS
.loader {
width: 150px;
height: 214px;
padding: 15px;
background: #f5f5f5;
border: 1px solid #eee;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.header {
display: flex;
margin-top: 5px;
margin-bottom: 20px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e0e0e0;
margin-right: 15px;
}
.info {
flex: 1;
padding-top: 5px;
}
.nickname {
width: 40px;
height: 16px;
background: #e0e0e0;
border-radius: 4px;
margin-bottom: 8px;
}
.signature {
width: 55px;
height: 12px;
background: #e0e0e0;
border-radius: 4px;
}
.qr-code {
width: 110px;
height: 110px;
background: #e0e0e0;
border-radius: 8px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.qr-icon {
width: 80px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.08;
}
.loader::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: shine 1.2s infinite;
}
@keyframes shine {
100% {
left: 200%;
}
}