Pulsing Scarcity Stock Meter

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="scarcity-card"><div class="sc-top"><span class="sc-dot"></span><span class="sc-txt">Almost Sold Out!</span></div><div class="sc-bar-bg"><div class="sc-bar-fill"></div></div><div class="sc-foot">Only <b>4 items</b> left in stock</div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.scarcity-card { width: 210px; background: #ffffff; border: 1px solid #fee2e2; border-radius: 12px; padding: 14px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.sc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sc-dot { width: 6px; height: 6px; background: #dc2626; border-radius: 50%; animation: pulseRed 1s alternate infinite; }
@keyframes pulseRed { 0% { opacity: 0.2; } 100% { opacity: 1; transform: scale(1.2); } }
.sc-txt { font-size: 8px; font-weight: 900; color: #dc2626; letter-spacing: 0.5px; }
.sc-bar-bg { width: 100%; height: 6px; background: #fef2f2; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.sc-bar-fill { width: 85%; height: 100%; background: linear-gradient(90deg, #f87171, #dc2626); border-radius: 3px; animation: stripeSlide 2s linear infinite; background-size: 15px 15px; background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent); }
@keyframes stripeSlide { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } }
.sc-foot { font-size: 7px; color: #451a1a; }