# easy-elements/1.3.1/includes/Extensions/ProgressBar/ReadingProgressBar.php

Easy Elements for Elementor – Addons & Website Templates, version 1.3.1. 343 lines.

- Page: https://pluginprobe.com/plugins/easy-elements/1.3.1/code/includes/Extensions/ProgressBar/ReadingProgressBar.php
- Raw: https://pluginprobe.com/plugins/easy-elements/1.3.1/raw/includes/Extensions/ProgressBar/ReadingProgressBar.php
- Modified: 2026-01-26T10:13:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-elements/1.3.1/code/includes/Extensions/ProgressBar/ReadingProgressBar.php#L10-L20`.

```php
<?php
namespace Easyel\EasyElements\Extensions\ProgressBar;
/**
 * Easy ReadingProgressBar
 *
 * @package EasyElements
 */

if (!defined('ABSPATH')) {
    exit;
}

use \Elementor\Controls_Manager;

class ReadingProgressBar {

	/**
	 * Holds the singleton instance
	 *
	 * @var Easy_readingprogressbar|null
	 */
	private static $instance = null;

	/**
	 * Constructor
	 */
	private function __construct() {

        $tab_slug = 'extensions';
        $extensions_settings = get_option('easy_element_' . $tab_slug, [] );

        $enable_reading_progress_bar = isset( $extensions_settings['enable_reading_progress_bar'] ) ? $extensions_settings['enable_reading_progress_bar'] : 0;

        if(  (int) $enable_reading_progress_bar !== 1 ) {
            return;
        }

		add_action('elementor/documents/register_controls', [$this, 'easyel_progressbar_controls'], 10);

		add_action('wp_footer', [$this, 'easyel_render_progressbar_html']);

		add_action( 'wp_enqueue_scripts', [ $this, "easy_progressbar_css" ] );  

		add_action( 'wp_enqueue_scripts', function() {

			if ( ! did_action( 'elementor/loaded' ) ) {
				return;
			}

			if ( \Elementor\Plugin::$instance->editor->is_edit_mode()
				|| \Elementor\Plugin::$instance->preview->is_preview_mode()
			) {
				wp_enqueue_script(
					'easyel-editor-script',
					EASYELEMENTS_DIR_URL . 'includes/Extensions/ProgressBar/assets/js/progress-bar.js',
					[ 'jquery' ],
					EASYELEMENTS_VER,
					true
				);
			}

		});
	}

	/**
	 * Get instance
	 */
	public static function get_instance() : self {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}
		return self::$instance;
	}

	 public  function easy_progressbar_css() {
        wp_enqueue_style(
            'easy-progress-bar',
            EASYELEMENTS_DIR_URL . 'includes/Extensions/ProgressBar/assets/css/progress-bar.css',
            [],
            EASYELEMENTS_VER
        );
    }

	public function easyel_progressbar_controls( $element ) {
		$element->start_controls_section(
            'easyel_progress_section',
            [
                'label' => EASY_EXTENSION_BADGE . __('Reading Progress Bar', 'easy-elements'),
                'tab' => Controls_Manager::TAB_SETTINGS,
            ]
        );

        $element->add_control(
            'easyel_enable_progress',
            [
                'label' => __('Enable Reading Progress Bar', 'easy-elements'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'no',
                'label_on' => __('Yes', 'easy-elements'),
                'label_off' => __('No', 'easy-elements'),
                'return_value' => 'yes',
            ]
        );

		$options = [
            'global' => esc_html__( 'Enter Site', 'easy-elements' ),
            'current-page'     => esc_html__( 'Current Page', 'easy-elements' ),
			'all-posts'    => esc_html__( 'All Posts', 'easy-elements' ),
            'all-pages'     => esc_html__( 'All Pages', 'easy-elements' ),
			'all-pages-post'     => esc_html__( 'All Pages & Post', 'easy-elements' ),
            'front-page'      => esc_html__( 'Front Pages', 'easy-elements' ),
            'blog-page'      => esc_html__( 'Blog Pages', 'easy-elements' ),
        ];

        if ( ! apply_filters('easyel/pro_enabled', false) ) {
            $options['all-posts']   = esc_html__( 'All Posts (pro)', 'easy-elements' );
            $options['all-pages']     = esc_html__( 'All Pages (pro)', 'easy-elements' );
			$options['all-pages-post']     = esc_html__( 'All Pages & Post (pro)', 'easy-elements' );
            $options['front-page']     = esc_html__( 'Front Pages (pro)', 'easy-elements' );
            $options['blog-page']     = esc_html__( 'Blog Pages (pro)', 'easy-elements' );
           
        }

		$element->add_control(
			'easyel_indivisual_global',
			[
				'label' => __('Apply Settings', 'easy-elements'),
				'type' => Controls_Manager::SELECT,
				'default' => 'global',
				'options' => $options,
				'condition' => [ 'easyel_enable_progress' => 'yes' ],
			]
		);

		$element->add_control(
			'easyel_progress_position',
			[
				'label' => __('Position', 'easy-elements'),
				'type' => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'top'    => __('Top', 'easy-elements'),
					'bottom' => __('Bottom', 'easy-elements'),
				],
				'selectors' => [
					'.easyel-progress-wrapper' => '{{VALUE}}: 0; {{VALUE === "top" ? "bottom: auto;" : "top: auto;"}}',
				],
				'condition' => [ 'easyel_enable_progress' => 'yes' ],
			]
		);

		$element->add_control(
            'easyel_progress_color',
            [
                'label' => __('Bar Color', 'easy-elements'),
                'type' => Controls_Manager::COLOR,
                'default' => '#0073aa',
                'selectors' => [
                    '.easyel-reading-progress-bar::-webkit-progress-value' => 'background-color: {{VALUE}};',
                    '.easyel-reading-progress-bar::-moz-progress-bar' => 'background-color: {{VALUE}};',
                ],
                'condition' => [ 'easyel_enable_progress' => 'yes' ],
            ]
        );

		$element->add_control(
			'easyel_progress_bg_color',
			[
				'label' => __('Progress Background Color', 'easy-elements'),
				'type' => Controls_Manager::COLOR,
				'default' => '#e0e0e0',
				'selectors' => [
					'.easyel-progress-wrapper' => '--easyel-progress-bg-color: {{VALUE}} !important;',
				],
				'condition' => [ 'easyel_enable_progress' => 'yes' ],
			]
		);

        $element->add_control(
            'easyel_progress_height',
            [
                'label' => __('Height (px)', 'easy-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range' => [ 'px' => [ 'min' => 1, 'max' => 100 ] ],
                'default' => [ 'size' => 8 ],
                'selectors' => [
                    '.easyel-progress-wrapper' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [ 'easyel_enable_progress' => 'yes' ],
            ]
        );

		$element->end_controls_section();
	}

	public function easyel_render_progressbar_html() {

		$global = get_option( 'easyel_global_settings', [] );

		if ( empty( $global['reading_progress']['rules'] ) ) {
			return;
		}

		$rules = $global['reading_progress']['rules'];

		/**
		 *  Specific rules (non-global)
		 */
		foreach ( $rules as $rule ) {

			if ( empty( $rule['enabled'] ) || $rule['apply_to'] === 'global' ) {
				continue;
			}

			if ( $this->should_render_rule( $rule ) ) {
				$this->render_progressbar_html( $rule );
				return; 
			}
		}

		/**
		 *  Global rules (fallback)
		 */
		foreach ( $rules as $rule ) {

			if ( empty( $rule['enabled'] ) || $rule['apply_to'] !== 'global' ) {
				continue;
			}

			if ( $this->should_render_rule( $rule ) ) {
				$this->render_progressbar_html( $rule );
				return;
			}
		}
	}

	private function should_render_rule( $rule ) {

		$apply_to = apply_filters(
			'easyel/reading_progress/apply_to',
			$rule['apply_to'],
			$rule
		);

		$show = apply_filters(
			'easyel/reading_progress/should_render',
			null,
			$apply_to,
			$rule
		);

		if ( $show !== null ) {
			return (bool) $show;
		}

		switch ( $apply_to ) {

			case 'current-page':
				return get_queried_object_id() === (int) $rule['source_post'];

			case 'global':
				return true;
		}

		return false;
	}

	private function render_progressbar_html( $settings ) {

		$pos_css = ($settings['position'] === 'bottom')
			? 'bottom:0; top:auto;'
			: 'top:0; bottom:auto;';

		$height =  isset( $settings['height'] ) ? $settings['height'] : '';
		$color  = isset( $settings['color'] ) ? $settings['color'] : '';
		$bg_color = isset( $settings['wrapper_bg_color'] ) ? $settings['wrapper_bg_color'] : ''; 

		echo '<div class="easyel-progress-wrapper" style="
				position: fixed;
				width: 100%;
				height: ' . esc_attr( $height ). 'px;
				' . esc_attr( $pos_css ) . '
				background-color: ' . esc_attr( $bg_color ) . '; 
				--easyel-progress-bg-color: ' . esc_attr( $bg_color ) . ';
				z-index: 99999999;
			">
			<progress id="easyel-reading-progress-bar"
				class="easyel-reading-progress-bar"
				value="0"
				max="100"
				style="
					position: absolute;
					top:0; left:0;
					width: 100%;
					height: ' . esc_attr( $height ) . 'px;
					--easyel-progress-color:' . esc_attr( $color ) . ';
					z-index: 999999;
				"></progress>
		</div>';
		?>

		<script>
		jQuery(function ($) {

			let easyprogressBar = $('#easyel-reading-progress-bar');
			if (!easyprogressBar.length) return;

			let activated = false;

			function updateProgressfunc() {
				let winHeight = $(window).height();
				let docHeight = $(document).height();
				let scrollTop = $(window).scrollTop();

				let max = docHeight - winHeight;
				easyprogressBar.attr('max', max);
				easyprogressBar.val(scrollTop);
			}

			easyprogressBar
				.val(0)
				.css({ opacity: 0, visibility: 'hidden' });

			$(window).one('scroll', function () {
				activated = true;
				updateProgressfunc();
				easyprogressBar.css({ opacity: 1, visibility: 'visible' });
			});

			$(window).on('scroll resize', function () {
				if (!activated) return;
				window.requestAnimationFrame(updateProgressfunc);
			});

		});
		</script>

	<?php
	}

}

```