Renovate Perceived Performance with Skeleton Screens

Hello All,

Today, I am going to explain about skeleton screens.

You may think they sound somewhat terrifying as well as that they’re difficult to implement, yet consider the possibility that I disclosed to you that they are quite easy to make. When added to your application, skeleton screens turn into a magnificent element to make your application feel unbelievably quick.

When building an application, you’re continually ensuring that you are doing everything effectively from a specialized point of view to guarantee incredible execution. Be that as it may, another, regularly overlooked piece of execution is called seen execution. Seen execution is the means by which quick an activity seems to happen to the client. Skeleton screens are a great way to improve the perceived performance of your app, when combined with traditional optimizations (lazy loading, code splitting, etc).

Skeleton screens, not a scary movie

You have most likely observed skeleton screens previously in the event that you have utilized Facebook, Slack or Medium, however how about we really expound on what they are. We can consider skeleton screens as rendering the “skeleton” or a “mockup” of substance before it has really stacked.

Skeleton screens good example is Facebook. They make heavy use of skeleton screens in their native app and web app. They use a similar implementation to Medium, rendering a Skeleton Screen where content will eventually be:

The page using a skeleton screen has several advantages here that lead to a better experience including:

1. It feels faster by giving an indication of what the content is going to look like before it has loaded.

2. We never block the user from interacting with the app. The user is free to scroll and interact with the app even while the content is still being loaded.

3. The page using a loading indicator is a very jarring experience as it flashes from a loading spinner to the fully loaded page. Whereas the page using skeleton screens provides a much smoother experience when the content loads.

Sweet, can I haz now?

Skeleton screens are pretty simple to make with plain HTML and a little CSS. Here is an example of a simple Skeleton Screen.

HTML

<div id="skeleton">
	<header class="skeletonheader">
		<div class="container">
			<div class="row">
				<div class="headerin">
					<div class="logo"></div>
					<div class="name"></div>
				</div>
				<div class="menuanduser">
					<div class="menulines">
						<div class="menu-lines"></div>
						<div class="menu-lines"></div>
						<div class="menu-lines"></div>
					</div>
					<div class="menulist">
						<div class="menu1"></div>
						<div class="menu1"></div>
						<div class="menu1"></div>
						<div class="menu1"></div>
						<div class="menu1"></div>
					</div>
					<div class="useravtar">
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="row m-t-100 row1mob">
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox noanimation">
					<div class="userdashpic"></div>
					<div class="usersammury">
						<div class="usersammurytext1"></div>
						<div class="usersammurytext2"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox"></div>
			</div>
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox"></div>
			</div>
		</div>
		<div class="row row2mob">
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox boxfooterline"></div>
			</div>
			<div class="col-sm-8 xs-p-l-r-8">
				<div class="skeletonbigbox boxfooterline"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox boxfooterline"></div>
			</div>
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox"></div>
			</div>
			<div class="col-sm-4 xs-p-l-r-8">
				<div class="skeletonbox"></div>
			</div>
		</div>
	</div>
	<footer class="skeleton_footer">
		<div class="line"></div>
	</footer>
</div>

</div>

</div>

</div>

</div>

</header>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</footer>

</div>

CSS

#skeleton {
	z-index: 10000;
	position: absolute;
	height: 100vh;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}
div#skeleton:before {
	content: "";
	width: 100%;
	height: 100%;
	background: white;
	position: fixed;
	z-index: 0;
}

	#skeleton .post {
		width: 220px;
		height: 80px;
	}

		#skeleton .post .avatar {
			float: left;
			width: 52px;
			height: 52px;
			background-color: #ccc;
			border-radius: 25%;
			margin: 8px;
			background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);
			background-size: 600px;
			animation: shine-avatar 1.6s infinite linear;
		}

		#skeleton .post .line {
			float: left;
			width: 150px;
			height: 16px;
			margin-top: 12px;
			border-radius: 7px;
			background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);
			background-size: 600px;
			animation: shine-lines 1.6s infinite linear;
		}

		#skeleton .post .avatar + .line {
			margin-top: 11px;
			width: 100px;
		}

		#skeleton .post .line ~ .line {
			background-color: #ddd;
		}


	/*=============== skeleton Header===================*/
#skeleton .skeletonheader {
	height: 70px;
	position: fixed;
	z-index: 9;
	top: 0;
	width: 100%;
	background-image: linear-gradient(90deg, #f5f4f4 0px, #f5f4f4 40px, #f5f4f4 80px);
}

	#skeleton .headerin {
		width: 220px;
		height: 70px;
		float: left;
	}

		#skeleton .headerin .logo {
			float: left;
			width: 52px;
			height: 52px;
			background-color: #ccc;
			border-radius: 50%;
			margin: 8px;
			background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);
			background-size: 600px;
			animation: shine-avatar 1.6s infinite linear;
		}

		#skeleton .headerin .name {
			float: left;
			width: 150px;
			height: 16px;
			margin-top: 27px;
			border-radius: 0px;
			background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);
			background-size: 600px;
			animation: shine-lines 1.6s infinite linear;
		}

	#skeleton .menuanduser {
		float: right;
	}

.menuanduser .menulist {
	float: left;
}

.menuanduser .useravtar {
	float: left;
}

.menuanduser .menulist .menu1 {
	float: left;
	width: 80px;
	height: 10px;
	margin: 31px 5px 05px;
	border-radius: 0px;
	background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);
	background-size: 600px;
	animation: shine-lines 1.6s infinite linear;
}

.useravtar {
	float: left;
	width: 40px;
	height: 40px;
	background-color: #ccc;
	border-radius: 50%;
	margin: 13px;
	background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);
	background-size: 600px;
}
/*=============== skeleton Header===================*/
/*=============== skeleton Footer===================*/
#skeleton .skeleton_footer {
	height: 48px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-image: linear-gradient(90deg, #efeeee 0px, #efeeee 40px, #efeeee 80px);
}

	#skeleton .skeleton_footer .line {
		text-align: center;
		width: 270px;
		margin: 0 auto;
		height: 30px;
		margin-top: 10px;
		border-radius: 7px;
		background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);
		background-size: 600px;
		animation: shine-footer 1.6s infinite linear;
	}
/*=============== skeleton Footer===================*/

.skeletonbox {
	position: relative;
	height: 291px;
	background-color: #f6f7f8;
	border-radius: 0%;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 600px;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
}

@keyframes placeHolderShimmer {
	0% {
		background-position: -90px 0
	}

	100% {
		background-position: 490px 0
	}
}

.noanimation {
	animation: none;
	background-image: none;
}

.userdashpic {
	position: absolute;
	border: 3px solid #fff;
	top: 100px;
	width: 73px;
	height: 73px;
	border-radius: 50%;
	background: #ccc;
	left: 0;
	right: 0;
	margin: auto;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 600px;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
}
.usersammury {
	float: left;
	width: 100%;
	height: 135px;
	background: #fff;
	margin-top: 137px;
}

.usersammurytext1 {
	float: left;
	width: 100%;
	height: 14px;
	margin-top: 60px;
	border-radius: 0px;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 600px;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
}
.usersammurytext2 {
	float: left;
	width: 50%;
	height: 14px;
	margin-top: 15px;
	border-radius: 0px;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 600px;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
}

.skeletonbigbox {
	height: 291px;
	background-color: #ccc;
	border-radius: 0%;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 600px;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: bigboxanimation;
	animation-timing-function: linear;
}

@keyframes bigboxanimation {
	0% {
		background-position: -90px 0
	}

	100% {
		background-position: 800px 0
	}
}

.boxfooterline {
	position:relative;
}
.boxfooterline:before {
	width: 100%;
	content: "";
	height: 4px;
	background: white;
	position: absolute;
	z-index: 0;
	bottom: 46px;
}


#skeleton .menulines {
	float: left;
	width: 40px;
	height: 30px;
	margin-top: 20px;
}
.menu-lines {
	float: left;
	width: 100%;
	height: 5px;
	margin-bottom: 5px;
	border-radius: 0px;
	background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);
	background-size: 600px;
	animation: shine-lines 1.6s infinite linear;
}



@keyframes shine-lines {
	0% {
		background-position: -100px;
	}

	40%, 100% {
		background-position: 180px;
	}
}

@keyframes shinenew {
	0% {
		background-position: -100px;
	}

	40%, 100% {
		background-position: 600px;
	}
}

@keyframes shine-avatar {
	0% {
		background-position: -32px;
	}

	40%, 100% {
		background-position: 208px;
	}
}

@keyframes dashboard{
	0% {
		background-position: -32px;
	}

	40%, 100% {
		background-position: 360px;
	}

}

@keyframes bigbox {
	0% {
		background-position: -32px;
	}

	40%, 100% {
		background-position: 740px;
	}
}


@keyframes shine-footer {
	0% {
		background-position: 100px;
	}

	40%, 100% {
		background-position: 500px;
	}
}

.xs-p-l-r-8 {
	padding-left: 7.5px;
	padding-right: 7.5px;
}

.row2mob {
	margin-bottom: 15px;
}

.row1mob {
	margin-bottom: 15px;
}


@media only screen and (max-width: 768px) {
	.menulist {
		display:none;
	}
	#skeleton .headerin .name {
		width: 110px;
	}

	#skeleton .menulines {
		display: block !important;
	}

	.skeletonbox, .skeletonbigbox {
		margin-bottom: 15px;
	}

	.xs-p-l-r-8 {
		padding-left: 15px;
		padding-right: 15px;
	}

	.row1mob, .row2mob {
		margin-bottom: 0px;
	}

	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

#skeleton {

z-index: 10000;

position: absolute;

height: 100vh;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

background: #fff;

}

div#skeleton:before {

content: "";

width: 100%;

height: 100%;

background: white;

position: fixed;

z-index: 0;

}

#skeleton .post {

width: 220px;

height: 80px;

}

#skeleton .post .avatar {

float: left;

width: 52px;

height: 52px;

background-color: #ccc;

border-radius: 25%;

margin: 8px;

background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);

background-size: 600px;

animation: shine-avatar 1.6s infinite linear;

}

#skeleton .post .line {

float: left;

width: 150px;

height: 16px;

margin-top: 12px;

border-radius: 7px;

background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);

background-size: 600px;

animation: shine-lines 1.6s infinite linear;

}

#skeleton .post .avatar + .line {

margin-top: 11px;

width: 100px;

}

#skeleton .post .line ~ .line {

background-color: #ddd;

}

/*=============== skeleton Header===================*/

#skeleton .skeletonheader {

height: 70px;

position: fixed;

z-index: 9;

top: 0;

width: 100%;

background-image: linear-gradient(90deg, #f5f4f4 0px, #f5f4f4 40px, #f5f4f4 80px);

}

#skeleton .headerin {

width: 220px;

height: 70px;

float: left;

}

#skeleton .headerin .logo {

float: left;

width: 52px;

height: 52px;

background-color: #ccc;

border-radius: 50%;

margin: 8px;

background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);

background-size: 600px;

animation: shine-avatar 1.6s infinite linear;

}

#skeleton .headerin .name {

float: left;

width: 150px;

height: 16px;

margin-top: 27px;

border-radius: 0px;

background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);

background-size: 600px;

animation: shine-lines 1.6s infinite linear;

}

#skeleton .menuanduser {

float: right;

}

.menuanduser .menulist {

float: left;

}

.menuanduser .useravtar {

float: left;

}

.menuanduser .menulist .menu1 {

float: left;

width: 80px;

height: 10px;

margin: 31px 5px 05px;

border-radius: 0px;

background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);

background-size: 600px;

animation: shine-lines 1.6s infinite linear;

}

.useravtar {

float: left;

width: 40px;

height: 40px;

background-color: #ccc;

border-radius: 50%;

margin: 13px;

background-image: linear-gradient(90deg, #e8e9ea 0px, #edeef1 40px, #e8e9ea 80px);

background-size: 600px;

}

/*=============== skeleton Header===================*/

/*=============== skeleton Footer===================*/

#skeleton .skeleton_footer {

height: 48px;

position: fixed;

bottom: 0;

width: 100%;

background-image: linear-gradient(90deg, #efeeee 0px, #efeeee 40px, #efeeee 80px);

}

#skeleton .skeleton_footer .line {

text-align: center;

width: 270px;

margin: 0 auto;

height: 30px;

margin-top: 10px;

border-radius: 7px;

background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);

background-size: 600px;

animation: shine-footer 1.6s infinite linear;

}

/*=============== skeleton Footer===================*/

.skeletonbox {

position: relative;

height: 291px;

background-color: #f6f7f8;

border-radius: 0%;

background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

background-size: 600px;

animation-duration: 1.2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-name: placeHolderShimmer;

animation-timing-function: linear;

}

@keyframes placeHolderShimmer {

0% {

background-position: -90px 0

}

100% {

background-position: 490px 0

}

.noanimation {

animation: none;

background-image: none;

}

.userdashpic {

position: absolute;

border: 3px solid #fff;

top: 100px;

width: 73px;

height: 73px;

border-radius: 50%;

background: #ccc;

left: 0;

right: 0;

margin: auto;

background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

background-size: 600px;

animation-duration: 1.2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-name: placeHolderShimmer;

animation-timing-function: linear;

}

.usersammury {

float: left;

width: 100%;

height: 135px;

background: #fff;

margin-top: 137px;

}

.usersammurytext1 {

float: left;

width: 100%;

height: 14px;

margin-top: 60px;

border-radius: 0px;

background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

background-size: 600px;

animation-duration: 1.2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-name: placeHolderShimmer;

animation-timing-function: linear;

}

.usersammurytext2 {

float: left;

width: 50%;

height: 14px;

margin-top: 15px;

border-radius: 0px;

background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

background-size: 600px;

animation-duration: 1.2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-name: placeHolderShimmer;

animation-timing-function: linear;

}

.skeletonbigbox {

height: 291px;

background-color: #ccc;

border-radius: 0%;

background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

background-size: 600px;

animation-duration: 1.2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-name: bigboxanimation;

animation-timing-function: linear;

}

@keyframes bigboxanimation {

0% {

background-position: -90px 0

}

100% {

background-position: 800px 0

}

.boxfooterline {

position:relative;

}

.boxfooterline:before {

width: 100%;

content: "";

height: 4px;

background: white;

position: absolute;

z-index: 0;

bottom: 46px;

}

#skeleton .menulines {

float: left;

width: 40px;

height: 30px;

margin-top: 20px;

}

.menu-lines {

float: left;

width: 100%;

height: 5px;

margin-bottom: 5px;

border-radius: 0px;

background-image: linear-gradient(90deg, #d9d9d9 0px, #e8e8e8 40px, #d9d9d9 80px);

background-size: 600px;

animation: shine-lines 1.6s infinite linear;

}

@keyframes shine-lines {

0% {

background-position: -100px;

}

40%, 100% {

background-position: 180px;

}

@keyframes shinenew {

0% {

background-position: -100px;

}

40%, 100% {

background-position: 600px;

}

@keyframes shine-avatar {

0% {

background-position: -32px;

}

40%, 100% {

background-position: 208px;

}

@keyframes dashboard{

0% {

background-position: -32px;

}

40%, 100% {

background-position: 360px;

}

@keyframes bigbox {

0% {

background-position: -32px;

}

40%, 100% {

background-position: 740px;

}

@keyframes shine-footer {

0% {

background-position: 100px;

}

40%, 100% {

background-position: 500px;

}

.xs-p-l-r-8 {

padding-left: 7.5px;

padding-right: 7.5px;

}

.row2mob {

margin-bottom: 15px;

}

.row1mob {

margin-bottom: 15px;

}

@media only screen and (max-width: 768px) {

.menulist {

display:none;

}

#skeleton .headerin .name {

width: 110px;

}

#skeleton .menulines {

display: block !important;

}

.skeletonbox, .skeletonbigbox {

margin-bottom: 15px;

}

.xs-p-l-r-8 {

padding-left: 15px;

padding-right: 15px;

}

.row1mob, .row2mob {

margin-bottom: 0px;

}

Renovate Perceived Performance with Skeleton Screens

Sweet, can I haz now?

Submit a Comment Cancel reply

Recent Posts

Recent Comments

Categories

Archives