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.