{
	"var": {
		"bg": "#795548",
		"color_1": "#7ef9ff",
		"color_2": "#89cff0",
		"color_3": "#4682b4",
		"color_4": "#0f52ba",
		"color_5": "#000080"
	},
	"css": "@-webkit-keyframes loaderHide { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes loaderHide { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } #wp-page-loader {z-index: 9999; display: flex; position: fixed; width: 100%; height: 100%; overflow: hidden; background: #{{bg}}; top: 0; left: 0; align-items: center; justify-content: center; } #wp-page-loader.available { -webkit-animation: loaderHide; animation: loaderHide; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #wp-page-loader .loading { display: flex; } #wp-page-loader .loading .dot { position: relative; width: 2em; height: 2em; margin: 0.8em; border-radius: 50%; } #wp-page-loader .loading .dot::before { position: absolute; content: \"\"; width: 100%; height: 100%; background: inherit; border-radius: inherit; animation: loaderWave 2s ease-out infinite; } #wp-page-loader .loading .dot:nth-child(1) { background: #{{color_1}}; } #wp-page-loader .loading .dot:nth-child(1)::before { animation-delay: 0.2s; } #wp-page-loader .loading .dot:nth-child(2) { background: #{{color_2}}; } #wp-page-loader .loading .dot:nth-child(2)::before { animation-delay: 0.4s; } #wp-page-loader .loading .dot:nth-child(3) { background: #{{color_3}}; } #wp-page-loader .loading .dot:nth-child(3)::before { animation-delay: 0.6s; } #wp-page-loader .loading .dot:nth-child(4) { background: #{{color_4}}; } #wp-page-loader .loading .dot:nth-child(4)::before { animation-delay: 0.8s; } #wp-page-loader .loading .dot:nth-child(5) { background: #{{color_5}}; } #wp-page-loader .loading .dot:nth-child(5)::before { animation-delay: 1s; } @keyframes loaderWave { 50%, 75% { transform: scale(2.5); } 80%, 100% { opacity: 0; } }",
	"html": "<div id=\"wp-page-loader\" class=\"loader-wrap\"> <div class=\"loading\"> <div class=\"dot\"></div> <div class=\"dot\"></div> <div class=\"dot\"></div> <div class=\"dot\"></div> <div class=\"dot\"></div> </div> </div>"
}