Advertisement
oscarviedma

Estilos y HTML OV Preloader - OV DIVI

Oct 25th, 2024
300
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.96 KB | None | 0 0
  1. // Agregar estilos
  2. function add_ov_preloader_styles() {
  3.     if (isset($_GET['et_fb'])) {
  4.         return;
  5.     }
  6.     ?>
  7.     <style>
  8.         .ov-preloader-background {
  9.             position: fixed;
  10.             top: 0;
  11.             left: 0;
  12.             width: 100%;
  13.             height: 100%;
  14.             background: #ffffff; /* color fondo preloader */
  15.             z-index: 999998;
  16.             opacity: 1;
  17.             transition: opacity 1s ease;
  18.         }
  19.         .ov-preloader-background.fade-out {
  20.             opacity: 0;
  21.         }
  22.         .ov-preloader {
  23.             position: fixed;
  24.             width: 100%;
  25.             height: 100vh;
  26.             display: flex;
  27.             z-index: 999999;
  28.         }
  29.         .ov-preloader-section {
  30.             position: relative;
  31.             width: 20%;
  32.             height: 100%;
  33.             background: #000000; /* color fondo transición preloader */
  34.             transform: translateY(0);
  35.             transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
  36.         }
  37.         .ov-preloader.ov-loaded .ov-preloader-section:nth-child(1) { transform: translateY(-100%); transition-delay: 0s; }
  38.         .ov-preloader.ov-loaded .ov-preloader-section:nth-child(2) { transform: translateY(-100%); transition-delay: 0.2s; }
  39.         .ov-preloader.ov-loaded .ov-preloader-section:nth-child(3) { transform: translateY(-100%); transition-delay: 0.4s; }
  40.         .ov-preloader.ov-loaded .ov-preloader-section:nth-child(4) { transform: translateY(-100%); transition-delay: 0.6s; }
  41.         .ov-preloader.ov-loaded .ov-preloader-section:nth-child(5) { transform: translateY(-100%); transition-delay: 0.8s; }
  42.         .ov-loading-container {
  43.             position: fixed;
  44.             top: 50%;
  45.             left: 50%;
  46.             transform: translate(-50%, -50%);
  47.             z-index: 10000;
  48.             color: white;
  49.             text-align: center;
  50.         }
  51.         .ov-loading-progress {
  52.             font-size: 3rem;
  53.             font-weight: 300;
  54.             color: #ffffff; /* color contador */
  55.             letter-spacing: 2px;
  56.             opacity: 1;
  57.             transition: opacity 0.5s ease;
  58.         }
  59.         .ov-preloader.ov-loaded .ov-loading-container {
  60.             opacity: 0;
  61.         }
  62.     </style>
  63.     <?php
  64. }
  65. add_action('wp_head', 'add_ov_preloader_styles');
  66.  
  67. // Agregar HTML del preloader
  68. function add_ov_preloader_html() {
  69.     if (isset($_GET['et_fb'])) {
  70.         return;
  71.     }
  72.     ?>
  73.     <!-- Preloader -->
  74.     <div class="ov-preloader-background"></div>
  75.     <div class="ov-preloader">
  76.         <div class="ov-preloader-section"></div>
  77.         <div class="ov-preloader-section"></div>
  78.         <div class="ov-preloader-section"></div>
  79.         <div class="ov-preloader-section"></div>
  80.         <div class="ov-preloader-section"></div>
  81.         <div class="ov-loading-container">
  82.             <div class="ov-loading-progress">0%</div>
  83.         </div>
  84.     </div>
  85.     <?php
  86. }
  87. add_action('wp_body_open', 'add_ov_preloader_html');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement