Skeleton

by Yaroslav Samardak

HTML

<div>Savings: <span class="skeleton text-primary-accent" id="el1"></span>, <span class="skeleton" id="el2"></span></div>

SCSS

$text-color: rgba(0, 0, 0, .65);
$text-primary-color: #3367d6;
$bg-color: #F2F2F2;

body {
  min-height: 100vh;
	font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13px;
	line-height: 1.5;
	font-variant: tabular-nums;
  color: $text-color;
	background-color: $bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-primary-accent {
	color: $text-primary-color;
}

span.skeleton {
	display: inline-block;
	transition: .218s all linear;
	
	&:empty {
		min-width: 40px;
		min-height: 14px;
		background-color: fade-out($text-color, .5);
		background-image: linear-gradient(100deg, transparent, fade-out($bg-color, .5) 50%, transparent 100%);
		background-size: 50% 100%;
		background-position: -100% 0;
		background-repeat: repeat-y;
		animation: loading 1.5s infinite linear;
	}
	
	&.text-primary-accent:empty {
		background-color: fade-out($text-primary-color, .5);
	}
}

@keyframes loading {
  to {
    background-position: 800% 0;
  }
}

JavaScript

setTimeout(() => {
	document.getElementById('el1').innerText = '$4.27'
	
	setTimeout(() => {
		document.getElementById('el2').innerText = '$120.71'
	}, 2200)
}, 3500)