How to add Preloader in WordPress without plugin

Form this tutorial you will find out how to change the preloader in WordPress without a plugin.

Let’s start ….

Step-1: Add code in sample-config.php

// Preloader Options
Redux::setSection( $opt_name, array(
    'title'            => esc_html__( 'Preloader', 'gtfix-toolkit' ),
    'id'               => 'preloader_opt',
    'icon'             => 'dashicons dashicons-controls-repeat',
    'fields'           => array(

        array(
            'id'      => 'enable_preloader',
            'type'    => 'switch',
            'title'   => esc_html__( 'Pre-loader', 'gtfix-toolkit' ),
            'on'      => esc_html__( 'Enable', 'gtfix-toolkit' ),
            'off'     => esc_html__( 'Disable', 'gtfix-toolkit' ),
            'default' => true,
        ),

        array(
            'required' => array( 'enable_preloader', '=', '1' ),
            'id'       => 'preloader_style',
            'type'     => 'select',
            'title'    => esc_html__( 'Pre-loader Style', 'gtfix-toolkit' ),
            'default'   => 'circle-spin',
            'options'  => array(
                'circle-spin'   => esc_html__( 'Spin Preloader', 'gtfix-toolkit' ),
                'text'          => esc_html__( 'Text Preloader', 'gtfix-toolkit' ),
                'image'         => esc_html__( 'Image Preloader', 'gtfix-toolkit' )
            )
        ),

        /**
         * Text Preloader
         */
        array(
            'title'     => esc_html__( 'Background Color', 'gtfix-toolkit' ),
            'id'        => 'preloader_color_spin',
            'type'      => 'background',
            'background-image'      => false,
            'background-repeat'     => false,
            'background-size'       => false,
            'background-attachment' => false,
            'background-position'   => false,
            'transparent'           => false,
            'output'    => array( '.preloader-area' ),
        ),
        array(
            'title'     => esc_html__( 'Color', 'gtfix-toolkit' ),
            'id'        => 'preloader_color',
            'type'      => 'color',
            'output'    => array( '.preloader-area p' ),
            'required'  => array( 'preloader_style', '=', 'text' ),
        ),
        array(
            'id'       => 'loading_text',
            'type'     => 'text',
            'title'    => esc_html__( 'Loading Text', 'gtfix-toolkit' ),
            'default'  => esc_html__( 'Loading', 'gtfix-toolkit' ),
            'required' => array( 'preloader_style', '=', 'text' ),
        ),

        array(
            'title'         => esc_html__( 'Loading Text Typography', 'gtfix-toolkit' ),
            'id'            => 'preloader_small_typo',
            'type'          => 'typography',
            'text-align'    => false,
            'output'        => '.preloader-area p',
            'required' => array( 'preloader_style', '=', 'text' ),
        ),

        /**
         * Image Preloader
         */
        array(
            'required' => array( 'preloader_style', '=', 'image' ),
            'id'       => 'preloader_image',
            'type'     => 'media',
            'title'    => esc_html__( 'Pre-loader image', 'gtfix-toolkit' ),
            'compiler' => true,
        ),
    )
));

Step-2: Go to Theme Option and Enable Preloader, select Pre-loader style, Background color

Step-3: Add code in template-functions.php

/**
 * Preloader
*/

if ( ! function_exists( 'gtfix_preloader' ) ) :
    function gtfix_preloader() {
        global $gtfix_opt;

        if( isset( $gtfix_opt['enable_preloader'] ) ):
            $is_preloader = $gtfix_opt['enable_preloader'];
        else:
            $is_preloader = true;
        endif;

        $is_preloader       = !empty($gtfix_opt['enable_preloader']) ? $gtfix_opt['enable_preloader'] : '';

        $preloader_style    = !empty($gtfix_opt['preloader_style']) ? $gtfix_opt['preloader_style'] : 'circle-spin';

        if( $is_preloader == true ):
            if ( defined( 'ELEMENTOR_VERSION' ) ) :
                if (\Elementor\Plugin::$instance->preview->is_preview_mode()) :
                    echo '';
                else:
                    if ( $preloader_style == 'text' ) :
                        if (!empty( $gtfix_opt['loading_text'] ) ) : ?>
                            <div class="preloader-area ">
                                <div class="loader">
                                    <p class="text-center"> <?php echo esc_html( $gtfix_opt['loading_text'] ) ?> </p>
                                </div>
                            </div>
                        <?php endif;
                    elseif( $preloader_style == 'circle-spin' ) : ?>
                        <div class="preloader-area">
                            <div class="spinner">
                                <div class="inner">
                                    <div class="disc"></div>
                                    <div class="disc"></div>
                                    <div class="disc"></div>
                                </div>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="preloader-area preloader-img">
                            <div class="loader">
                            </div>
                        </div>
                    <?php endif;
                endif;
            else:
                if ( $preloader_style == 'text' ) :
                    if (!empty( $gtfix_opt['loading_text'] ) ) : ?>
                        <div class="preloader-area ">
                            <div class="loader">
                                <p class="text-center"> <?php echo esc_html( $gtfix_opt['loading_text'] ) ?> </p>
                            </div>
                        </div>
                    <?php endif;
                elseif( $preloader_style == 'circle-spin' ) :
                    ?>
                    <div class="preloader-area">
                        <div class="spinner">
                            <div class="inner">
                                <div class="disc"></div>
                                <div class="disc"></div>
                                <div class="disc"></div>
                            </div>
                        </div>
                    </div>
                <?php else : ?>
                    <div class="preloader-area preloader-img">
                        <div class="loader">
                        </div>
                    </div>
                    <?php
                endif;
            endif;
        endif;
    }
endif;

Step-4: Add code in header.php

<?php gtfix_preloader(); ?><!-- Preloader -->

Step-5: Add CSS

.preloader-area {
    position: fixed;
    top: 0;
    background-color: var(--primaryColor);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    text-align: center;

    .loader {
        position: absolute;
        top: 43%;
        left: 0;
        right: 0;
    }

    .spinner {
        width: 4em;
        height: 4em;
        transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
        transform-style: preserve-3d;
        position: absolute;
        left: 0;
        right: 0;
        top: 45%;
        transform: translateY(-45%);
        margin-left: auto;
        margin-right: auto;

        .disc {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            border: 0.3em dotted $white-color;

            &:nth-child(1) {
                animation: rotate 12s linear infinite;
            }
            &:nth-child(2) {
                animation: rotateDisc2 12s linear infinite;
            }
            &:nth-child(3) {
                animation: rotateDisc3 12s linear infinite;
            }
        }
        .inner {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: sphereSpin 6s linear infinite;
        }
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;
            right: 0;
            bottom: 0;
            border: 2px dotted $white-color;
            margin: -15px;
        }
    }
}
@keyframes sphereSpin {
    0% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(360deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotateDisc2 {
    from {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(90deg) rotateZ(360deg);
    }
}
@keyframes rotateDisc3 {
    from {
        transform: rotateY(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateY(90deg) rotateZ(360deg);
    }
}

Step-6: Add Custom JS

// Preloader
        $(window).on('load', function() {
            $('.preloader-area').fadeOut();
        });

Thanks! If you have any queries, please let me know in the comments box.