← All changes | assets/css/loftloader.css +41 -32 2.3 → 2.4.0 View file →

		@@ -1,13 +1,13 @@
1	1	/**
2	2	* LoftLoader Lite Frontend Style
3	3	*
4	4	* Plugin Name: LoftLoader
5		- * Plugin URI: http://www.loftocean.com/loftloader
6		- * Author: Kaylolo Yinxi Chen @Loft.Ocean
7		- * Author URI: http://www.loftocean.com
	5	+ * Plugin URI: https://www.loftocean.com/loftloader
	6	+ * Author: The Loft.Ocean Team
	7	+ * Author URI: https://www.loftocean.com
8	8	* Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9		- * Version: 2.3.0
	9	+ * Version: 2.4.0
10	10	*/
11	11	@-webkit-keyframes spinReturn {
12	12	0% {
13	13	-webkit-transform: rotate(0deg); }
		@@ -249,15 +249,14 @@
249	249	width: 100%;
250	250	height: 100%;
251	251	background: transparent !important; }
252	252	.loaded #loftloader-wrapper {
253		- -webkit-transform: translateX(-200%);
254		- -ms-transform: translateX(-200%);
255		- transform: translateX(-200%);
256		- visibility: hidden;
	253	+ -webkit-transform: translateX(-200vw);
	254	+ -ms-transform: translateX(-200vw);
	255	+ transform: translateX(-200vw);
257	256	pointer-events: none;
258		- transition: all;
259		- transition-delay: 1s; }
	257	+ opacity: 0;
	258	+ transition: opacity 0.0001s 1s, transform 0.0001s 2s; }
260	259	.loaded #loftloader-wrapper.slide-vertical {
261	260	-webkit-transform: translate(-100%, 0);
262	261	-ms-transform: translate(-100%, 0);
263	262	transform: translate(-100%, 0); }
		@@ -303,34 +302,42 @@
303	302	width: 100%;
304	303	will-change: opacity; }
305	304	.loaded #loftloader-wrapper .loader-section.section-fade {
306	305	opacity: 0 !important;
307		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
	306	+ transition: opacity 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
	307	+ #loftloader-wrapper .loader-section.end-no-animation {
	308	+ top: 0;
	309	+ left: 0;
	310	+ width: 100%;
	311	+ will-change: opacity; }
	312	+ .loaded #loftloader-wrapper .loader-section.end-no-animation, .loaded #loftloader-wrapper .loader-section.end-no-animation ~ * {
	313	+ opacity: 0;
	314	+ transition: all 0s 0s; }
308	315	#loftloader-wrapper .loader-section.section-slide-up {
309	316	top: 0;
310	317	left: 0;
311	318	width: 100%; }
312	319	.loaded #loftloader-wrapper .loader-section.section-slide-up {
313		- -webkit-transform: translateY(-100%);
314		- -ms-transform: translateY(-100%);
315		- transform: translateY(-100%);
316		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
	320	+ -webkit-transform: translateY(-100vh);
	321	+ -ms-transform: translateY(-100vh);
	322	+ transform: translateY(-100vh);
	323	+ transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
317	324	#loftloader-wrapper .loader-section.section-left, #loftloader-wrapper .loader-section.section-right {
318	325	top: 0; }
319	326	#loftloader-wrapper .loader-section.section-left {
320	327	left: 0; }
321	328	.loaded #loftloader-wrapper .loader-section.section-left {
322		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
323		- -webkit-transform: translateX(-100%);
324		- -ms-transform: translateX(-100%);
325		- transform: translateX(-100%); }
	329	+ transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	330	+ -webkit-transform: translateX(-50vw);
	331	+ -ms-transform: translateX(-50vw);
	332	+ transform: translateX(-50vw); }
326	333	#loftloader-wrapper .loader-section.section-right {
327	334	right: 0; }
328	335	.loaded #loftloader-wrapper .loader-section.section-right {
329		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
330		- -webkit-transform: translateX(100%);
331		- -ms-transform: translateX(100%);
332		- transform: translateX(100%); }
	336	+ transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	337	+ -webkit-transform: translateX(50vw);
	338	+ -ms-transform: translateX(50vw);
	339	+ transform: translateX(50vw); }
333	340	#loftloader-wrapper .loader-section.section-up, #loftloader-wrapper .loader-section.section-down {
334	341	left: 0;
335	342	width: 100%;
336	343	height: 50%; }
		@@ -336,19 +343,19 @@
336	343	height: 50%; }
337	344	#loftloader-wrapper .loader-section.section-up {
338	345	top: 0; }
339	346	.loaded #loftloader-wrapper .loader-section.section-up {
340		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
341		- -webkit-transform: translateY(-100%);
342		- -ms-transform: translateY(-100%);
343		- transform: translateY(-100%); }
	347	+ transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	348	+ -webkit-transform: translateY(-50vh);
	349	+ -ms-transform: translateY(-50vh);
	350	+ transform: translateY(-50vh); }
344	351	#loftloader-wrapper .loader-section.section-down {
345	352	bottom: 0; }
346	353	.loaded #loftloader-wrapper .loader-section.section-down {
347		- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
348		- -webkit-transform: translateY(100%);
349		- -ms-transform: translateY(100%);
350		- transform: translateY(100%); }
	354	+ transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	355	+ -webkit-transform: translateY(50vh);
	356	+ -ms-transform: translateY(50vh);
	357	+ transform: translateY(50vh); }
351	358
352	359	/* ==========================================================================
353	360	Loading - Spinning Sun
354	361	========================================================================== */
		@@ -647,5 +654,7 @@
647	654	overflow: hidden;
648	655	word-wrap: normal !important; }
649	656	.loader-close-button .close-des {
650	657	padding: 0 5px;
651		- font-size: 12px; }
	658	+ font-size: 12px; }
	659	+
	660	+/*# sourceMappingURL=loftloader.css.map */