Preloader animation: line from left to right

Hey donillo,

Please try to do the following:
1. (skip this step if you have a child theme) Download and use a child theme. You can download and find instructions on how to use it here: https://kriesi.at/documentation/enfold/child-theme/
2. Add this at the bottom of your child theme’s functions.php:

function avia_preload_screen()
{
	$class = avia_get_option('preloader_transitions') != "disabled" ? 'av-transition-enabled' : "";
	$label = __('Loading','avia_framework');
	$logo  = avia_get_option('preloader_logo');
	if( is_numeric( $logo ) )
	{ 
		$logo = wp_get_attachment_image_src( $logo, 'full' ); 
		$logo = is_array( $logo ) ? $logo[0] : ''; 
	}
	
	if( $logo ) 
	{
		$class .= " av-transition-with-logo";
		$logo = "<img class='av-preloading-logo' src='{$logo}' alt='{$label}' title='{$label}' />";
	}
	
	$output  = "";
	$output .= 	"<div class='av-siteloader-wrap {$class}'>";
	$output .= 		"<div class='av-siteloader-inner'>";
	$output .= 			"<div class='av-siteloader-cell'>";
	$output .= 			"<div class='yellow-line'></div>";
	$output .= 			$logo;
	$output .= 			"<div class='av-siteloader'><div class='av-siteloader-extra'></div>";
	$output .= 			"</div>";
	$output .= 		"</div>";
	$output .= 	"</div>";
	$output .= "</div>";
	
	return $output;
}

3. Add this CSS code in Enfold > General Styling > Quick CSS:

.yellow-line {  
    border-top: 3px solid #fcea1a !important;
    width: 100%;
    left: 0;
    position: absolute;
    animation: 1.5s ease-out 0s 1 yellowLine;
}

@keyframes yellowLine {
	0% {
		width: 0%;
		opacity: 0;
	}
	100% {
		width: 100%;
		opacity: 1;
	}
}

Hope this helps.

Best regards,
Nikko