Shimmer Mask Skeleton — codepeek.dev

Loaders · community component

CSSMIT licenseUpdated today

◉ 0 views

Live

<!--
  Author: @nadia-saleh
  License: MIT
  Tags: #css
-->
<div class="sm-skel"><i class="sm-avatar"></i><div class="sm-lines"><i></i><i></i><i></i></div></div>

/*
 * Author: @nadia-saleh
 * License: MIT
 * Tags: #css
 */

.sm-skel{display:grid;grid-template-columns:48px 1fr;gap:14px;width:260px}.sm-avatar,.sm-lines i{background:#e2e8f0;border-radius:8px}.sm-avatar{width:48px;height:48px;border-radius:50%}.sm-lines{display:grid;gap:8px}.sm-lines i{height:10px}.sm-lines i:nth-child(1){width:80%}.sm-lines i:nth-child(2){width:100%}.sm-lines i:nth-child(3){width:60%}.sm-skel *{position:relative;overflow:hidden}.sm-skel *:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);mask-image:linear-gradient(90deg,transparent,#000,transparent);animation:sm-sweep 1.6s ease-in-out infinite}@keyframes sm-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryLoaders

AccessibilityKeyboard ready

Explore similar parts →

Created by

Nadia Saleh

@nadia-saleh

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Nadia Saleh

Comments 0