<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;

use EcafeAddons\EcafeElementLoad;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Ecafe_Preloader extends Widget_Base {

	public function get_name() {
		return 'ecafe-preloader';
	}

	public function get_title() {
		return esc_html__( 'Pre Loader', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-preloader-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'loader', 'pre loader', 'preloader' );
	}

	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}

	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	protected function register_controls() {

		$this->start_controls_section(
			'content_section',
			array(
				'label' => esc_html__( 'Pre Loader', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'preloaderLayout',
			array(
				'label'   => esc_html__( 'Layout', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'layout1',
				'options' => array(
					'layout1'  => esc_html__( 'Layout 1 - Text', 'essential-classy-addons-for-elementor' ),
					'layout2'  => esc_html__( 'Layout 2 - Text Line', 'essential-classy-addons-for-elementor' ),
					'layout3'  => esc_html__( 'Layout 3 - Dots', 'essential-classy-addons-for-elementor' ),
					'layout4'  => esc_html__( 'Layout 4 - Dots Bounce', 'essential-classy-addons-for-elementor' ),
					'layout5'  => esc_html__( 'Layout 5 - Dots Move', 'essential-classy-addons-for-elementor' ),
					'layout6'  => esc_html__( 'Layout 6 - Dots Rotate', 'essential-classy-addons-for-elementor' ),
					'layout7'  => esc_html__( 'Layout 7 - Dots Rotate', 'essential-classy-addons-for-elementor' ),
					'layout8'  => esc_html__( 'Layout 8 - Dots Zoom', 'essential-classy-addons-for-elementor' ),
					'layout9'  => esc_html__( 'Layout 9 - Line Zoom', 'essential-classy-addons-for-elementor' ),
					'layout10' => esc_html__( 'Layout 10 - Line Dot', 'essential-classy-addons-for-elementor' ),
					'layout11' => esc_html__( 'Layout 11 - Circle Rotate', 'essential-classy-addons-for-elementor' ),
					'layout12' => esc_html__( 'Layout 12 - Circle Spin', 'essential-classy-addons-for-elementor' ),
					'layout13' => esc_html__( 'Layout 13 - Circle Line Spin', 'essential-classy-addons-for-elementor' ),
					'layout14' => esc_html__( 'Layout 14 - Dots Rotate', 'essential-classy-addons-for-elementor' ),
					'layout15' => esc_html__( 'Layout 15 - Circle Line Spin', 'essential-classy-addons-for-elementor' ),
					'layout16' => esc_html__( 'Layout 16 - Dots Spin Rotate', 'essential-classy-addons-for-elementor' ),
					'layout17' => esc_html__( 'Layout 17 - Dots Spin', 'essential-classy-addons-for-elementor' ),
					'layout18' => esc_html__( 'Layout 18 - Line Spin', 'essential-classy-addons-for-elementor' ),
					'layout19' => esc_html__( 'Layout 19 - Line Circle Spin', 'essential-classy-addons-for-elementor' ),
					'layout20' => esc_html__( 'Layout 20 - Dots Circle Rotate Spin', 'essential-classy-addons-for-elementor' ),
					'layout21' => esc_html__( 'Layout 21 - Square Spin', 'essential-classy-addons-for-elementor' ),
					'layout22' => esc_html__( 'Layout 22 - Line Animate', 'essential-classy-addons-for-elementor' ),
					'layout23' => esc_html__( 'Layout 23 - Dots Animate', 'essential-classy-addons-for-elementor' ),
					'layout24' => esc_html__( 'Layout 24 - Heart Fill', 'essential-classy-addons-for-elementor' ),
					'layout25' => esc_html__( 'Layout 25 - Text Fill', 'essential-classy-addons-for-elementor' ),
					'layout26' => esc_html__( 'Layout 26 - Text Fill Center', 'essential-classy-addons-for-elementor' ),
					'layout27' => esc_html__( 'Layout 27 - Text Fill Left Right', 'essential-classy-addons-for-elementor' ),
					'layout28' => esc_html__( 'Layout 28 - Text Fill Wave', 'essential-classy-addons-for-elementor' ),
					'layout29' => esc_html__( 'Layout 29 - Text Fill Wave', 'essential-classy-addons-for-elementor' ),
					'layout30' => esc_html__( 'Layout 30 Lines Dot Jump', 'essential-classy-addons-for-elementor' ),
					'layout31' => esc_html__( 'Layout 31 - Line Dot Move', 'essential-classy-addons-for-elementor' ),
					'layout32' => esc_html__( 'Layout 32 - Square Rotate', 'essential-classy-addons-for-elementor' ),
					'layout33' => esc_html__( 'Layout 33 - Line Spinner', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'preloaderBackVisible',
			array(
				'label'     => esc_html__( 'Visible for Backend Design', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => __( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => __( 'Disable', 'essential-classy-addons-for-elementor' ),
				'selectors' => array(
					'.elementor-editor-active .ec-pre-loader' => 'display:flex !important;',
				),
			)
		);
		$this->add_control(
			'backgroundColor',
			array(
				'label'     => esc_html__( 'Background Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => array(
					'.ec-pre-loader' => 'background: {{VALUE}};',
				),
				'condition' => array(
					'preloaderGradient!' => 'yes',
				),
			)
		);
		$this->add_control(
			'preloaderGradient',
			array(
				'label'     => esc_html__( 'Gradient Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => __( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => __( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'preloaderGradientBg',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '.ec-pre-loader',
				'condition' => array(
					'preloaderGradient' => 'yes',
				),
			)
		);
		$this->add_control(
			'preloaderText',
			array(
				'label'       => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'EC Addons...', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
				'selectors'   => array(
					'.ec-pre-loader .ec-pre-loader-in:before' => 'content: "{{VALUE}}"',
				),
				'condition'   => array(
					'preloaderLayout' => array( 'layout1', 'layout2', 'layout25', 'layout26', 'layout27', 'layout28', 'layout29' ),
				),
			)
		);
		$this->add_control(
			'maxDuration',
			array(
				'label' => esc_html__( 'Maximum Visible(ms)', 'essential-classy-addons-for-elementor' ),
				'type'  => Controls_Manager::NUMBER,
				'min'   => 100,
				'max'   => 99999,
				'step'  => 100,
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/preloader-animation/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/preloader-animation-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		$this->start_controls_section(
			'preloaderTextstyling',
			array(
				'label'     => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout1', 'layout2', 'layout25', 'layout26', 'layout27', 'layout28', 'layout29' ),
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '.ec-pre-loader .ec-pre-loader-in',
			)
		);
		$this->add_control(
			'titleColor',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->add_responsive_control(
			'animationDuration',
			array(
				'label'     => esc_html__( 'Animation Duration', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 25,
				'step'      => 1,
				'default'   => 1,
				'condition' => array(
					'preloaderLayout' => array( 'layout25', 'layout26', 'layout27', 'layout28', 'layout29' ),
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderDotsstyling',
			array(
				'label'     => esc_html__( 'Dots', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout3', 'layout4', 'layout5', 'layout6', 'layout7', 'layout9' ),
				),
			)
		);
		$this->add_responsive_control(
			'dotsSize',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'dotsColor',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderDots2styling',
			array(
				'label'     => esc_html__( 'Dots', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout8', 'layout10' ),
				),
			)
		);
		$this->add_control(
			'dots2Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderSpinnerstyling',
			array(
				'label'     => esc_html__( 'Spinner', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout11', 'layout12', 'layout13', 'layout14', 'layout15', 'layout16', 'layout17', 'layout18', 'layout19', 'layout20', 'layout21' ),
				),
			)
		);
		$this->add_responsive_control(
			'preloaderSpinnerWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'preloaderLayout!' => array( 'layout14', 'layout16', 'layout18', 'layout19', 'layout20', 'layout21' ),
				),
			)
		);
		$this->add_responsive_control(
			'preloaderSpinnerBorderWidth',
			array(
				'label'      => esc_html__( 'Border Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'condition'  => array(
					'preloaderLayout' => 'layout11',
				),
			)
		);
		$this->add_responsive_control(
			'preloaderSpinnerPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'condition'  => array(
					'preloaderLayout' => 'layout12',
				),
			)
		);
		$this->add_control(
			'spinner1Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->add_control(
			'spinner2Color',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#f00000',
				'condition' => array(
					'preloaderLayout!' => array( 'layout12', 'layout13', 'layout14', 'layout15', 'layout16', 'layout17', 'layout18', 'layout20', 'layout21' ),
				),
			)
		);
		$this->add_responsive_control(
			'preloaderSpinnerSize1',
			array(
				'label'      => esc_html__( 'Size 1', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'condition'  => array(
					'preloaderLayout' => 'layout13',
				),
			)
		);
		$this->add_responsive_control(
			'preloaderSpinnerSize2',
			array(
				'label'      => esc_html__( 'Size 2', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'condition'  => array(
					'preloaderLayout' => 'layout13',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderProgressstyling',
			array(
				'label'     => esc_html__( 'Progress', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout22' ),
				),
			)
		);
		$this->add_responsive_control(
			'progresssWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 100,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'progresssHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 30,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 5,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'progresssRadius',
			array(
				'label'      => esc_html__( 'Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 50,
					),
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'border-radius:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'progress1Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ff0000',
			)
		);
		$this->add_control(
			'progress2Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderDots23styling',
			array(
				'label'     => esc_html__( 'Dots', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout23' ),
				),
			)
		);
		$this->add_responsive_control(
			'dots23Width',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 300,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 200,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'dots23Height',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 30,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'dots231Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ff0000',
			)
		);
		$this->add_control(
			'dots232Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderHeart24styling',
			array(
				'label'     => esc_html__( 'Heart', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout24' ),
				),
			)
		);
		$this->add_responsive_control(
			'heart24Width',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'heart241Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ff0000',
			)
		);
		$this->add_control(
			'heart242Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderDotsLines3031tyling',
			array(
				'label'     => esc_html__( 'Dots Line', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => array( 'layout30', 'layout31' ),
				),
			)
		);
		$this->add_responsive_control(
			'dotsLines3031Height',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 300,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'dotsLines13031Color',
			array(
				'label'   => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->add_control(
			'dotsLines23031Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ff0000',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderSquare32tyling',
			array(
				'label'     => esc_html__( 'Square', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => 'layout32',
				),
			)
		);
		$this->add_responsive_control(
			'square32Width',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'square132Color',
			array(
				'label'   => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->add_control(
			'square232Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ff0000',
			)
		);
		$this->add_control(
			'square332Color',
			array(
				'label'   => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#005610',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'preloaderCircle33tyling',
			array(
				'label'     => esc_html__( 'Circle', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'preloaderLayout' => 'layout33',
				),
			)
		);
		$this->add_responsive_control(
			'circle33Width',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 300,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
				'selectors'  => array(
					'.ec-pre-loader .ec-pre-loader-in' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'circle33Color',
			array(
				'label'   => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);
		$this->end_controls_section();
	}

	protected function render() {
		$settings        = $this->get_settings_for_display();
		$preloaderLayout = ! empty( $settings['preloaderLayout'] ) ? $settings['preloaderLayout'] : 'layout1';

		$ecpreloadcss = '<style>.elementor-editor-active .ec-pre-loader{display:none}.ec-preloader-active{overflow:hidden}.elementor-editor-active.ec-preloader-active{overflow:inherit}.ec-pre-loader{position:fixed;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.ec-preloader-active .ec-pre-loader{z-index:999999999999;}.ec-pre-loader-in{font-size:35px;width:fit-content;}';
		if ( ! empty( $preloaderLayout ) ) {
			if ( $preloaderLayout == 'layout1' || $preloaderLayout == 'layout2' || $preloaderLayout == 'layout25' || $preloaderLayout == 'layout26' || $preloaderLayout == 'layout27' || $preloaderLayout == 'layout28' || $preloaderLayout == 'layout29' ) {
				$titleColor = ! empty( $settings['titleColor'] ) ? $settings['titleColor'] : '';
			}
			if ( $preloaderLayout == 'layout25' || $preloaderLayout == 'layout26' || $preloaderLayout == 'layout27' || $preloaderLayout == 'layout28' || $preloaderLayout == 'layout29' ) {
				$animationDuration  = ! empty( $settings['animationDuration'] ) ? $settings['animationDuration'] : '1';
				$animationDuration1 = ! empty( $settings['animationDuration'] ) ? $settings['animationDuration'] * 2 : '2';
			}

			if ( $preloaderLayout == 'layout3' || $preloaderLayout == 'layout4' || $preloaderLayout == 'layout5' || $preloaderLayout == 'layout6' || $preloaderLayout == 'layout7' || $preloaderLayout == 'layout9' ) {
				$dotsColor = ! empty( $settings['dotsColor'] ) ? $settings['dotsColor'] : '';
				if ( $preloaderLayout == 'layout5' || $preloaderLayout == 'layout6' || $preloaderLayout == 'layout7' || $preloaderLayout == 'layout9' ) {
					$dotsSize  = ! empty( $settings['dotsSize']['size'] ) ? $settings['dotsSize']['size'] : '';
					$dotsSize1 = ! empty( $settings['dotsSize']['size'] ) ? $settings['dotsSize']['size'] + 10 : '';
				}
			}
			if ( $preloaderLayout == 'layout8' || $preloaderLayout == 'layout10' ) {
				$dots2Color = ! empty( $settings['dots2Color'] ) ? $settings['dots2Color'] : '';
			}
			if ( $preloaderLayout == 'layout1' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{clip-path:inset(0 100% 0 0);animation:ecpreloadanim1 3s steps(100) infinite;color:' . esc_attr( $titleColor ) . '}@keyframes ecpreloadanim1{to{clip-path:inset(0 -1ch 0 0)}}';
			} elseif ( $preloaderLayout == 'layout2' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:fit-content;padding-bottom:8px;background:linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;animation:ecpreloadanim2 3s linear infinite;color:' . esc_attr( $titleColor ) . '}@keyframes ecpreloadanim2{to{background-size:100% 3px}}';
			} elseif ( $preloaderLayout == 'layout3' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:4;background:radial-gradient(circle closest-side,' . esc_attr( $dotsColor ) . ' 90%,#ffffff00) 0/calc(100%/3) 100% space;clip-path:inset(0 100% 0 0);animation:ecpreloadanim3 1s steps(4) infinite}@keyframes ecpreloadanim3{to{clip-path:inset(0 -34% 0 0)}}';
			} elseif ( $preloaderLayout == 'layout4' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:2;background:no-repeat radial-gradient(circle closest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 0 50%,no-repeat radial-gradient(circle closest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 50% 50%,no-repeat radial-gradient(circle closest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 100% 50%;background-size:calc(100%/3) 50%;animation:ecpreloadanim4 1s infinite linear}@keyframes ecpreloadanim4{20%{background-position:0 0%,50% 50%,100% 50%}40%{background-position:0 100%,50% 0%,100% 50%}60%{background-position:0 50%,50% 100%,100% 0}80%{background-position:0 50%,50% 50%,100% 100%}}';
			} elseif ( $preloaderLayout == 'layout5' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;color:' . esc_attr( $dotsColor ) . ';background:' . esc_attr( $dotsColor ) . ';border-radius:50%;animation:ecpreloadanim5 1s infinite linear alternate}@keyframes ecpreloadanim5{0%{box-shadow:' . esc_attr( $dotsSize ) . 'px 0,-' . esc_attr( $dotsSize1 ) . 'px 0}50%{box-shadow:' . esc_attr( $dotsSize ) . 'px 0,-' . esc_attr( $dotsSize ) . 'px 0}100%{box-shadow:' . esc_attr( $dotsSize1 ) . 'px 0,-' . esc_attr( $dotsSize ) . 'px 0}}';
			} elseif ( $preloaderLayout == 'layout6' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;background:no-repeat radial-gradient(farthest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 50% 0,no-repeat radial-gradient(farthest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 0 100%,no-repeat radial-gradient(farthest-side,' . esc_attr( $dotsColor ) . ' 90%,#0000) 100% 100%;background-size:35% calc(35%*1);animation:ecpreloadanim6 1s infinite}@keyframes ecpreloadanim6{50%,100%{background-position:100% 100%,50% 0,0 100%}}';
			} elseif ( $preloaderLayout == 'layout7' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;border-radius:50%;background:' . esc_attr( $dotsColor ) . ';color:' . esc_attr( $dotsColor ) . ';box-shadow:-' . esc_attr( $dotsSize1 ) . 'px 0px,' . esc_attr( $dotsSize1 ) . 'px 0;animation:ecpreloadanim7 1s infinite}@keyframes ecpreloadanim7{25%{box-shadow:-' . esc_attr( $dotsSize1 ) . 'px -' . esc_attr( $dotsSize1 ) . 'px,' . esc_attr( $dotsSize1 ) . 'px ' . esc_attr( $dotsSize1 ) . 'px}50%{box-shadow:0 -' . esc_attr( $dotsSize1 ) . 'px,0 ' . esc_attr( $dotsSize1 ) . 'px}75%{box-shadow:' . esc_attr( $dotsSize1 ) . 'px -' . esc_attr( $dotsSize1 ) . 'px,-' . esc_attr( $dotsSize1 ) . 'px ' . esc_attr( $dotsSize1 ) . 'px}100%{box-shadow:' . esc_attr( $dotsSize1 ) . 'px 0px,-' . esc_attr( $dotsSize1 ) . 'px 0}}';
			} elseif ( $preloaderLayout == 'layout8' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:5px;color:' . esc_attr( $dots2Color ) . ';aspect-ratio:1;border-radius:50%;box-shadow:20px -20px 0 0px,40px -20px 0 0px,60px -20px 0 0px,20px 0 0 5px,40px 0 0 5px,60px 0 0 5px,20px 20px 0 0px,40px 20px 0 0px,60px 20px 0 0;transform:translateX(-40px);animation:l26 2s infinite linear}@keyframes l26{12.5%{box-shadow:20px -20px 0 0px,40px -20px 0 0px,60px -20px 0 5px,20px 0 0 5px,40px 0 0 0px,60px 0 0 5px,20px 20px 0 0px,40px 20px 0 0px,60px 20px 0 0}25%{box-shadow:20px -20px 0 5px,40px -20px 0 0px,60px -20px 0 5px,20px 0 0 0px,40px 0 0 0px,60px 0 0 0px,20px 20px 0 0px,40px 20px 0 5px,60px 20px 0 0}50%{box-shadow:20px -20px 0 5px,40px -20px 0 5px,60px -20px 0 0px,20px 0 0 0px,40px 0 0 0px,60px 0 0 0px,20px 20px 0 0px,40px 20px 0 0px,60px 20px 0 5px}62.5%{box-shadow:20px -20px 0 0px,40px -20px 0 0px,60px -20px 0 0px,20px 0 0 5px,40px 0 0 0px,60px 0 0 0px,20px 20px 0 0px,40px 20px 0 5px,60px 20px 0 5px}75%{box-shadow:20px -20px 0 0px,40px -20px 0 5px,60px -20px 0 0px,20px 0 0 0px,40px 0 0 0px,60px 0 0 5px,20px 20px 0 0px,40px 20px 0 0px,60px 20px 0 5px}87.5%{box-shadow:20px -20px 0 0px,40px -20px 0 5px,60px -20px 0 0px,20px 0 0 0px,40px 0 0 5px,60px 0 0 0px,20px 20px 0 5px,40px 20px 0 0px,60px 20px 0 0}}';
			} elseif ( $preloaderLayout == 'layout9' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:.75;background:no-repeat linear-gradient(' . esc_attr( $dotsColor ) . ' 0 0) 0 50%,no-repeat linear-gradient(' . esc_attr( $dotsColor ) . ' 0 0) 50% 50%,no-repeat linear-gradient(' . esc_attr( $dotsColor ) . ' 0 0) 100% 50%;animation:ecpreloadanim9 1s infinite linear alternate}@keyframes ecpreloadanim9{0%{background-size:20% 50% ,20% 50% ,20% 50%}20%{background-size:20% 20% ,20% 50% ,20% 50%}40%{background-size:20% 100%,20% 20% ,20% 50%}60%{background-size:20% 50% ,20% 100%,20% 20%}80%{background-size:20% 50% ,20% 50% ,20% 100%}100%{background-size:20% 50% ,20% 50% ,20% 50%}}';
			} elseif ( $preloaderLayout == 'layout10' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:40px;height:30px;background:no-repeat linear-gradient(' . esc_attr( $dots2Color ) . ' 0 0) 0 100%,no-repeat linear-gradient(' . esc_attr( $dots2Color ) . ' 0 0) 50% 100%,no-repeat linear-gradient(' . esc_attr( $dots2Color ) . ' 0 0) 100% 100%;background-size:10px calc(100% - 5px);position:relative}.ec-pre-loader .ec-pre-loader-in:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:' . esc_attr( $dots2Color ) . ';left:0;top:0;animation:ecpreloadanim10_1 1.5s linear infinite alternate,ecpreloadanim10_2 .75s cubic-bezier(0,200,.8,200) infinite}@keyframes ecpreloadanim10_1{100%{left:calc(100% - 10px)}}@keyframes ecpreloadanim10_2{100%{top:-.1px}}';
			} elseif ( $preloaderLayout == 'layout11' ) {
				$preloaderSpinnerBorderWidth = ! empty( $settings['preloaderSpinnerBorderWidth']['size'] ) ? $settings['preloaderSpinnerBorderWidth']['size'] : '';
				$spinner1Color               = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$spinner2Color               = ! empty( $settings['spinner2Color'] ) ? $settings['spinner2Color'] : '';
				$ecpreloadcss               .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;border-radius:50%;border-style:solid;border-width:' . esc_attr( $preloaderSpinnerBorderWidth ) . 'px;border-color:' . esc_attr( $spinner1Color ) . ' ' . esc_attr( $spinner2Color ) . ';animation:ecpreloadanim11 1s infinite}@keyframes ecpreloadanim11{to{transform:rotate(.5turn)}}';
			} elseif ( $preloaderLayout == 'layout12' ) {
				$preloaderSpinnerPadding = ! empty( $settings['preloaderSpinnerPadding']['size'] ) ? $settings['preloaderSpinnerPadding']['size'] : '';
				$spinner1Color           = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss           .= '.ec-pre-loader .ec-pre-loader-in{padding:' . esc_attr( $preloaderSpinnerPadding ) . 'px;aspect-ratio:1;border-radius:50%;background:' . esc_attr( $spinner1Color ) . ';-webkit-mask:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:ecpreloadanim12 1s infinite linear}@keyframes ecpreloadanim12{to{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout13' ) {
				$spinner1Color         = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$preloaderSpinnerSize1 = ! empty( $settings['preloaderSpinnerSize1']['size'] ) ? $settings['preloaderSpinnerSize1']['size'] : '';
				$preloaderSpinnerSize2 = ! empty( $settings['preloaderSpinnerSize2']['size'] ) ? $settings['preloaderSpinnerSize2']['size'] : '';
				$ecpreloadcss         .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;border-radius:50%;background:conic-gradient(#0000 10%,' . esc_attr( $spinner1Color ) . ') content-box;-webkit-mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 ' . esc_attr( $preloaderSpinnerSize1 ) . 'px,#000 ' . esc_attr( $preloaderSpinnerSize2 ) . 'px);-webkit-mask-composite:destination-in;mask-composite:intersect;animation:ecpreloadanim13 1s infinite steps(10)}@keyframes ecpreloadanim13{to{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout14' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:50px;aspect-ratio:1;background:no-repeat radial-gradient(farthest-side,' . esc_attr( $spinner1Color ) . ' 92%,#0000) top,no-repeat radial-gradient(farthest-side,' . esc_attr( $spinner1Color ) . ' 92%,#0000) left,no-repeat radial-gradient(farthest-side,' . esc_attr( $spinner1Color ) . ' 92%,#0000) right,no-repeat radial-gradient(farthest-side,' . esc_attr( $spinner1Color ) . ' 92%,#0000) bottom;background-size:15px 15px;animation:ecpreloadanim14 1s infinite}@keyframes ecpreloadanim14{to{transform:rotate(.5turn)}}';
			} elseif ( $preloaderLayout == 'layout15' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;display:grid;border-radius:50%;background:linear-gradient(0deg,' . esc_attr( $spinner1Color ) . 'a3 30%,#0000 0 70%,' . esc_attr( $spinner1Color ) . ' 0) 50%/8% 100%,linear-gradient(90deg,' . esc_attr( $spinner1Color ) . 'a3 30%,#0000 0 70%,' . esc_attr( $spinner1Color ) . ' 0) 50%/100% 8%;background-repeat:no-repeat;animation:ecpreloadanim15 1s infinite steps(12)}.ec-pre-loader .ec-pre-loader-in::before,.ec-pre-loader .ec-pre-loader-in::after{content:"";grid-area:1/1;border-radius:50%;background:inherit;opacity:.9;transform:rotate(30deg)}.ec-pre-loader .ec-pre-loader-in::after{opacity:.8;transform:rotate(60deg)}@keyframes ecpreloadanim15{100%{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout16' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:6px;height:6px;border-radius:50%;color:' . esc_attr( $spinner1Color ) . ';box-shadow:25px 0 0 0,calc(0.70*25px) calc(0.70*25px) 0 1px,0 25px 0 2px,calc(-0.70*25px) calc(0.70*20px) 0 3px,calc(-1*25px) 0 0 4px,calc(-0.70*25px) calc(-0.70*25px)0 5px,0 calc(-1*25px) 0 6px;animation:ecpreloadanim16 1s infinite steps(8)}@keyframes ecpreloadanim16{100%{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout17' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;display:grid;-webkit-mask:conic-gradient(from 15deg,#0000,#000);animation:ecpreloadanim17 1s infinite steps(12)}.ec-pre-loader .ec-pre-loader-in,.ec-pre-loader .ec-pre-loader-in:before,.ec-pre-loader .ec-pre-loader-in:after{background:radial-gradient(closest-side at 50% 12.5%,' . esc_attr( $spinner1Color ) . ' 98%,#0000) 50% 0/20% 80% repeat-y,radial-gradient(closest-side at 12% 50%,' . esc_attr( $spinner1Color ) . ' 98%,#0000) 0 50%/80% 20% repeat-x}.ec-pre-loader .ec-pre-loader-in:before,.ec-pre-loader .ec-pre-loader-in:after{content:"";grid-area:1/1;transform:rotate(30deg)}.ec-pre-loader .ec-pre-loader-in:after{transform:rotate(60deg)}@keyframes ecpreloadanim17{100%{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout18' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:55px;aspect-ratio:1;display:grid;border:4px solid #ffffff00;border-radius:50%;border-right-color:' . esc_attr( $spinner1Color ) . ';animation:ecpreloadanim18 1s infinite linear}.ec-pre-loader .ec-pre-loader-in::before,.ec-pre-loader .ec-pre-loader-in::after{content:"";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:ecpreloadanim18 2s infinite}.ec-pre-loader .ec-pre-loader-in::after{margin:8px;animation-duration:3s}@keyframes ecpreloadanim18{100%{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout19' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$spinner2Color = ! empty( $settings['spinner2Color'] ) ? $settings['spinner2Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:60px;aspect-ratio:1;display:grid;border:4px solid #ffffff00;border-radius:50%;border-color:' . esc_attr( $spinner1Color ) . '  #ffffff00;animation:ecpreloadanim19 1s infinite linear}.ec-pre-loader .ec-pre-loader-in::before,.ec-pre-loader .ec-pre-loader-in::after{content:"";grid-area:1/1;margin:2px;border:inherit;border-radius:50%}.ec-pre-loader .ec-pre-loader-in::before{border-color:' . esc_attr( $spinner2Color ) . ' #ffffff00;animation:inherit;animation-duration:.5s;animation-direction:reverse}.ec-pre-loader .ec-pre-loader-in::after{margin:8px}@keyframes ecpreloadanim19{100%{transform:rotate(1turn)}}';
			} elseif ( $preloaderLayout == 'layout20' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{width:30px;aspect-ratio:1;color:' . esc_attr( $spinner1Color ) . ';position:relative;background:radial-gradient(10px,currentColor 95%,#00000000)}.ec-pre-loader .ec-pre-loader-in:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(10px at bottom right,#00000000 95%,currentColor) top left,radial-gradient(10px at bottom left,#00000000 95%,currentColor) top right,radial-gradient(10px at top right,#00000000 95%,currentColor) bottom left,radial-gradient(10px at top left,#00000000 95%,currentColor) bottom right;background-size:18px 18px;background-repeat:no-repeat;animation:ecpreloadanim20 1.5s infinite cubic-bezier(0.3,1,0,1)}@keyframes ecpreloadanim20{33%{inset:-10px;transform:rotate(0deg)}66%{inset:-10px;transform:rotate(90deg)}100%{inset:0;transform:rotate(90deg)}}';
			} elseif ( $preloaderLayout == 'layout21' ) {
				$spinner1Color = ! empty( $settings['spinner1Color'] ) ? $settings['spinner1Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{background:no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $spinner1Color ) . ' 0 0);background-size:20px 20px;animation:ecpreloadanim21_1 1s infinite,ecpreloadanim21_2 1s infinite}@keyframes ecpreloadanim21_1{0%,100%{width:50px;height:50px}35%,65%{width:80px;height:80px}}@keyframes ecpreloadanim21_2{0%,40%{background-position:0 0,0 50%,0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,50% 50%}60%,100%{background-position:0 50%,0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,50% 50%}}';
			} elseif ( $preloaderLayout == 'layout22' ) {
				$progress1Color = ! empty( $settings['progress1Color'] ) ? $settings['progress1Color'] : '';
				$progress2Color = ! empty( $settings['progress2Color'] ) ? $settings['progress2Color'] : '';
				$ecpreloadcss  .= '.ec-pre-loader .ec-pre-loader-in{background:no-repeat linear-gradient(' . esc_attr( $progress1Color ) . ' 0 0),no-repeat linear-gradient(' . esc_attr( $progress1Color ) . ' 0 0),' . esc_attr( $progress2Color ) . ';background-size:60% 100%;animation:ecpreloadanim22 3s infinite}@keyframes ecpreloadanim22{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}100%{background-position:250% 0,250% 0}}';
			} elseif ( $preloaderLayout == 'layout23' ) {
				$dots231Color  = ! empty( $settings['dots231Color'] ) ? $settings['dots231Color'] : '';
				$dots232Color  = ! empty( $settings['dots232Color'] ) ? $settings['dots232Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{-webkit-mask:radial-gradient(circle closest-side,' . esc_attr( $dots232Color ) . ' 94%,#00000000) left/20% 100%;background:linear-gradient(' . esc_attr( $dots231Color ) . ' 0 0) left/0% 100% no-repeat ' . esc_attr( $dots232Color ) . ';animation:ecpreloadanim23 2s infinite steps(6)}@keyframes ecpreloadanim23{100%{background-size:120% 100%}}';
			} elseif ( $preloaderLayout == 'layout24' ) {
				$heart241Color = ! empty( $settings['heart241Color'] ) ? $settings['heart241Color'] : '';
				$heart242Color = ! empty( $settings['heart242Color'] ) ? $settings['heart242Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;background:linear-gradient(' . esc_attr( $heart241Color ) . ' 0 0) bottom/100% 0 no-repeat ' . esc_attr( $heart242Color ) . ';-webkit-mask:radial-gradient(circle at 60% 65%,' . esc_attr( $heart242Color ) . ' 62%,#00000000 65%) top left,radial-gradient(circle at 40% 65%,' . esc_attr( $heart242Color ) . ' 62%,#00000000 65%) top right,linear-gradient(to bottom left,' . esc_attr( $heart242Color ) . ' 42%,#00000000 43%) bottom left ,linear-gradient(to bottom right,' . esc_attr( $heart242Color ) . ' 42%,#00000000 43%) bottom right;-webkit-mask-size:50% 50%;-webkit-mask-repeat:no-repeat;animation:ecpreloadanim24 2s infinite linear}@keyframes ecpreloadanim24{90%,100%{background-size:100% 100%}}';
			} elseif ( $preloaderLayout == 'layout25' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{color:#00000000;-webkit-text-stroke:1px ' . esc_attr( $titleColor ) . ';background:conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) 0/0% 100% no-repeat text;animation:ecpreloadanim25 ' . esc_attr( $animationDuration ) . 's linear infinite}@keyframes ecpreloadanim25{to{background-size:120% 100%}}';
			} elseif ( $preloaderLayout == 'layout26' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{color:#00000000;-webkit-text-stroke:1px ' . esc_attr( $titleColor ) . ';background:conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) 50% / 0 100% no-repeat text;animation:ecpreloadanim26 ' . esc_attr( $animationDuration ) . 's linear infinite}@keyframes ecpreloadanim26{to{background-size:120% 100%}}';
			} elseif ( $preloaderLayout == 'layout27' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{color:#00000000;-webkit-text-stroke:1px ' . esc_attr( $titleColor ) . ';background:conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) no-repeat text 0,conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) no-repeat text 100%,conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) no-repeat text 0 0,conic-gradient(' . esc_attr( $titleColor ) . ' 0 0) no-repeat text 0 100%;animation:ecpreloadanim27 ' . esc_attr( $animationDuration ) . 's linear infinite}@keyframes ecpreloadanim27{0%,100%{background-size:0 100%,0 100%,100% 0 ,100% 0}50%{background-size:55% 100%,55% 100%,100% 0 ,100% 0}50.01%{background-size:0 100%,0 100%,100% 55%,100% 55%}}';
			} elseif ( $preloaderLayout == 'layout28' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{color:#0000;-webkit-text-stroke:1px ' . esc_attr( $titleColor ) . ';background:radial-gradient(1.13em at 50% 1.6em,' . esc_attr( $titleColor ) . ' 99%,#00000000 101%) calc(50% - 1.6em) 0/3.2em 100% text,radial-gradient(1.13em at 50% -0.8em,#00000000 99%,' . esc_attr( $titleColor ) . ' 101%) 50% .8em/3.2em 100% repeat-x text;animation:ecpreloadanim28 ' . esc_attr( $animationDuration ) . 's linear infinite}@keyframes ecpreloadanim28{to{background-position:calc(50% + 1.5em) 0,calc(50% + 3em) .9em}}';
			} elseif ( $preloaderLayout == 'layout29' ) {
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{color:#0000;-webkit-text-stroke:1px ' . esc_attr( $titleColor ) . ';background:radial-gradient(0.71em at 50% 1em,' . esc_attr( $titleColor ) . ' 99%,#0000 101%) calc(50% - 1em) 1em/2em 200% repeat-x text,radial-gradient(0.71em at 50% -0.5em,#0000 99%,' . esc_attr( $titleColor ) . ' 101%) 50% 1.5em/2em 200% repeat-x text;animation:ecpreloadanim29_1 .' . esc_attr( $animationDuration1 ) . 's linear infinite alternate,ecpreloadanim29_2 ' . esc_attr( $animationDuration ) . 's linear infinite}@keyframes ecpreloadanim29_1{to{background-position-x:50%,calc(50% + 1em)}}@keyframes ecpreloadanim29_2{to{background-position-y:-.5em,0}}';
			} elseif ( $preloaderLayout == 'layout30' ) {
				$dotsLines13031Color = ! empty( $settings['dotsLines13031Color'] ) ? $settings['dotsLines13031Color'] : '';
				$dotsLines23031Color = ! empty( $settings['dotsLines23031Color'] ) ? $settings['dotsLines23031Color'] : '';
				$ecpreloadcss       .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:2;background:linear-gradient(90deg,' . esc_attr( $dotsLines13031Color ) . ' 50%,#0000 0) -25% 100%/50% 3px repeat-x border-box;position:relative;animation:ecpreloadanim30_1 .75s linear infinite}.ec-pre-loader .ec-pre-loader-in:before{content:"";position:absolute;inset:auto 45% 0;aspect-ratio:1;border-radius:50%;background:' . esc_attr( $dotsLines23031Color ) . ';animation:ecpreloadanim30_2 .75s cubic-bezier(0,1000,1,1000) infinite}@keyframes ecpreloadanim30_1{to{background-position:-125% 100%}}@keyframes ecpreloadanim30_2{0%,2%{bottom:0}98%,to{bottom:.08%}}';
			} elseif ( $preloaderLayout == 'layout31' ) {
				$dotsLines13031Color = ! empty( $settings['dotsLines13031Color'] ) ? $settings['dotsLines13031Color'] : '';
				$dotsLines23031Color = ! empty( $settings['dotsLines23031Color'] ) ? $settings['dotsLines23031Color'] : '';
				$ecpreloadcss       .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:2;position:relative}.ec-pre-loader .ec-pre-loader-in:before{content:"";position:absolute;inset:100% 75% -10px 0;background:' . esc_attr( $dotsLines13031Color ) . ';border-radius:50px;animation:ecpreloadanim31_1 1s linear infinite alternate}.ec-pre-loader .ec-pre-loader-in:after{content:"";position:absolute;inset:auto 43% 0;aspect-ratio:1;border-radius:50%;background:' . esc_attr( $dotsLines23031Color ) . ';animation:ecpreloadanim31_2 1s cubic-bezier(0,900,1,900) infinite alternate,ecpreloadanim31_3 1s linear infinite alternate}@keyframes ecpreloadanim31_1{0%,30%{translate:0 -5px;rotate:20deg}70%,to{translate:300% -5px;rotate:-20deg}}@keyframes ecpreloadanim31_2{0%,2%{bottom:0}98%,to{bottom:.1%}}@keyframes ecpreloadanim31_3{0%{translate:-250%}to{translate:250%}}';
			} elseif ( $preloaderLayout == 'layout32' ) {
				$square132Color = ! empty( $settings['square132Color'] ) ? $settings['square132Color'] : '';
				$square232Color = ! empty( $settings['square232Color'] ) ? $settings['square232Color'] : '';
				$square332Color = ! empty( $settings['square332Color'] ) ? $settings['square332Color'] : '';
				$ecpreloadcss  .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;animation:ecpreloadanim32_1 2s infinite linear,ecpreloadanim32_2 3s infinite steps(1) -.5s}@keyframes ecpreloadanim32_1{0%{transform:perspective(150px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(150px) rotateX(180deg) rotateY(0deg)}100%{transform:perspective(150px) rotateX(180deg) rotateY(180deg)}}@keyframes ecpreloadanim32_2{0%{background:' . esc_attr( $square132Color ) . '}33%{background:' . esc_attr( $square232Color ) . '}66%{background:' . esc_attr( $square332Color ) . '}}';
			} elseif ( $preloaderLayout == 'layout33' ) {
				$circle33Color = ! empty( $settings['circle33Color'] ) ? $settings['circle33Color'] : '';
				$ecpreloadcss .= '.ec-pre-loader .ec-pre-loader-in{aspect-ratio:1;display:grid;color:' . esc_attr( $circle33Color ) . ';background:linear-gradient(90deg,currentColor 2px,#0000 0 calc(100% - 2px),currentColor 0) center/100% 14px,linear-gradient(0deg,currentColor 2px,#0000 0 calc(100% - 2px),currentColor 0) center/14px 100%,linear-gradient(currentColor 0 0) center/100% 2px,linear-gradient(currentColor 0 0) center/2px 100%;background-repeat:no-repeat;animation:ecpreloadanim33 5s infinite linear}.ec-pre-loader .ec-pre-loader-in::before,.ec-pre-loader .ec-pre-loader-in::after{content:"";grid-area:1/1;background:inherit;transform-origin:inherit;animation:inherit}.ec-pre-loader .ec-pre-loader-in::after{animation-duration:3s}@keyframes ecpreloadanim33{100%{transform:rotate(1turn)}}';
			}
		}
		$ecpreloadcss .= '</style>';
		echo $ecpreloadcss;

		$maxDuration = ! empty( $settings['maxDuration'] ) ? intval( $settings['maxDuration'] ) : 2000;

		$ecpreloaderscript = 'document.addEventListener("DOMContentLoaded", function () {
								let preloader = document.querySelector(".ec-pre-loader");
								let body = document.querySelector("body");
								let opacity = 1;

								body.classList.add("ec-preloader-active");

								function fadeOutPreloader() {
									let fadeOutInterval = setInterval(function () {
										if (opacity <= 0) {
											clearInterval(fadeOutInterval);
											preloader.style.display = "none";
											body.classList.remove("ec-preloader-active");
										} else {
											opacity -= 0.05;
											preloader.style.opacity = opacity;
										}
									}, 20);
								}

								let customTimeDone = false;
								let pageLoadDone = false;

								// custom timer
								setTimeout(function () {
									customTimeDone = true;
									if (pageLoadDone) fadeOutPreloader();
								}, ' . $maxDuration . ');

								// when page fully loads
								window.addEventListener("load", function () {
									pageLoadDone = true;
									if (customTimeDone) fadeOutPreloader();
									else fadeOutPreloader(); // run immediately if custom time is longer
								});
							});';

		echo wp_print_inline_script_tag( $ecpreloaderscript );
	}
}
