luislobo9b · January 5, 2023 14:47
diff --git a/shimmer-loader.html b/shimmer-loader.html
 <!doctype html>
 <html lang="pt-br">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no">
 	
 	<!-- bootstrap -->
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

 	<style>
 		.flex-center {
 			align-items: center;
 			display: flex;
 			justify-content: center;
 		}

 		.h-100vh {
 			height: 100vh;
 		}

 		.shimmer-loader {
 			height: 50%;
 			width: 50%;
 		}

 		.shimmer-loader {
 			animation: shimmer_loader 1500ms infinite !important;
 			background-size: 400% !important;
 			background-image: -ms-repeating-linear-gradient(90deg,
 					#eeeeee 0%, #eeeeee 40%,
 					#dddddd 50%, #dddddd 55%,
 					#eeeeee 65%, #eeeeee 100%) !important;
 			background-image: -o-repeating-linear-gradient(90deg,
 					#eeeeee 0%, #eeeeee 40%,
 					#dddddd 50%, #dddddd 55%,
 					#eeeeee 65%, #eeeeee 100%) !important;
 			background-image: -moz-repeating-linear-gradient(90deg,
 					#eeeeee 0%, #eeeeee 40%,
 					#dddddd 50%, #dddddd 55%,
 					#eeeeee 65%, #eeeeee 100%) !important;
 			background-image: -webkit-repeating-linear-gradient(90deg,
 					#eeeeee 0%, #eeeeee 40%,
 					#dddddd 50%, #dddddd 55%,
 					#eeeeee 65%, #eeeeee 100%) !important;
 			background-image: repeating-linear-gradient(90deg,
 					#eeeeee 0%, #eeeeee 40%,
 					#dddddd 50%, #dddddd 55%,
 					#eeeeee 65%, #eeeeee 100%) !important;
 		}

 		@keyframes shimmer_loader {
 			from {
 				background-position: 0% 0%;
 			}

 			to {
 				background-position: 100% 100%;
 			}
 		}
 	</style>
 </head>
 <body>

 	<div class="flex-center w-100 h-100vh">
 		<div class="shimmer-loader"></div>
 	</div>

 	<!-- bootstrap -->
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

 </body>
 </html>
	<!doctype html>
	<html lang="pt-br">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no">

	<!-- bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

	<style>
	.flex-center {
	align-items: center;
	display: flex;
	justify-content: center;
	}

	.h-100vh {
	height: 100vh;
	}

	.shimmer-loader {
	height: 50%;
	width: 50%;
	}

	.shimmer-loader {
	animation: shimmer_loader 1500ms infinite !important;
	background-size: 400% !important;
	background-image: -ms-repeating-linear-gradient(90deg,
	#eeeeee 0%, #eeeeee 40%,
	#dddddd 50%, #dddddd 55%,
	#eeeeee 65%, #eeeeee 100%) !important;
	background-image: -o-repeating-linear-gradient(90deg,
	#eeeeee 0%, #eeeeee 40%,
	#dddddd 50%, #dddddd 55%,
	#eeeeee 65%, #eeeeee 100%) !important;
	background-image: -moz-repeating-linear-gradient(90deg,
	#eeeeee 0%, #eeeeee 40%,
	#dddddd 50%, #dddddd 55%,
	#eeeeee 65%, #eeeeee 100%) !important;
	background-image: -webkit-repeating-linear-gradient(90deg,
	#eeeeee 0%, #eeeeee 40%,
	#dddddd 50%, #dddddd 55%,
	#eeeeee 65%, #eeeeee 100%) !important;
	background-image: repeating-linear-gradient(90deg,
	#eeeeee 0%, #eeeeee 40%,
	#dddddd 50%, #dddddd 55%,
	#eeeeee 65%, #eeeeee 100%) !important;
	}

	@keyframes shimmer_loader {
	from {
	background-position: 0% 0%;
	}

	to {
	background-position: 100% 100%;
	}
	}
	</style>
	</head>
	<body>

	<div class="flex-center w-100 h-100vh">
	<div class="shimmer-loader"></div>
	</div>

	<!-- bootstrap -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

	</body>
	</html>