Actualizacion Preloader Seccion Support Center

diseno/support-center/css/style.css

@@ -289,65 +289,89 @@ button:focus {
   background-position: center center;
 }
 
-/*-- Preloader --*/
+
+/* Preloader */
 #preloader {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
-  bottom: 0;
+  height: 100%;
-  background: -webkit-gradient(linear, left bottom, right top, from(#E63108), color-stop(#E63108), color-stop(#E63108), color-stop(#E63108), to(#E63108));
+  background-color:#fff;
-  background: linear-gradient(to right top, #E63108, #E63108, #E63108, #E63108, #E63108);
+  z-index: 999999;
-  z-index: 9999999;
 }
 
-#preloader #status {
+#loader {
-  position: absolute;
+  display: block;
+  position: relative;
   left: 50%;
   top: 50%;
-  -webkit-transform: translateY(-50%);
+  width: 150px;
-  transform: translateY(-50%);
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #003b73;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
 }
 
-.spinner {
+#loader:before {
-  width: 60px;
+  content: "";
-  height: 60px;
+  position: absolute;
-  background-color: #fff;
+  top: 5px;
-  border-radius: 6px;
+  left: 5px;
-  -webkit-box-shadow: 0 3px 12px rgba(6, 11, 47, 0.06);
+  right: 5px;
-  box-shadow: 0 3px 12px rgba(6, 11, 47, 0.06);
+  bottom: 5px;
-  margin: 100px auto;
+  border-radius: 50%;
-  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  border: 3px solid transparent;
-  animation: sk-rotateplane 1.2s infinite ease-in-out;
+  border-top-color: #E63108;
+  -webkit-animation: spin 3s linear infinite;
+  animation: spin 3s linear infinite;
 }
 
-@-webkit-keyframes sk-rotateplane {
+#loader:after {
-  0% {
+  content: "";
-    -webkit-transform: perspective(120px);
+  position: absolute;
-  }
+  top: 15px;
-  50% {
+  left: 15px;
-    -webkit-transform: perspective(120px) rotateY(180deg);
+  right: 15px;
+  bottom: 15px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #000;
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0%   {
+      -webkit-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
   }
 }
 
-@keyframes sk-rotateplane {
+@keyframes spin {
-  0% {
+  0%   {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+      -webkit-transform: rotate(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+      -ms-transform: rotate(0deg);
-  }
+      transform: rotate(0deg);
-  50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   }
   100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+      -webkit-transform: rotate(360deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
   }
 }
 
+
+
 /*-- btn --*/
 .theme-btn {
   width: 200px;
@@ -623,7 +647,7 @@ button:focus {
   position: absolute;
   width: 100%;
   z-index: 100;
-  top: 0px;
+  top: 26px;
 }
 
 .header_area.navbar_fixed .main_menu {
@@ -1789,9 +1813,9 @@ button:focus {
 
 @media (max-width: 575px) {
   .main_menu .navbar .navbar-brand img {
-    width: 135px;
+    width: 218px;
     position: relative;
-    top: -2px;
+    top: -1px;
   }
   .just_burger_menu {
     padding-right: 15px;
@@ -1809,7 +1833,7 @@ button:focus {
   }
   .right_burger {
     right: 15px;
-    top: 18px;
+    top: 12px;
     max-width: none;
     width: auto;
     -webkit-transform: translateX(0);
@@ -2038,9 +2062,9 @@ button:focus {
 
 @media only screen and (max-width: 479px) {
   .hero-1-content .title {
-    font-size: 40px;
+    font-size: 31px;
-    line-height: 50px;
+    line-height: 36px;
-    margin-bottom: 35px;
+    margin-bottom: 33px;
   }
 }
 

diseno/support-center/index.php

@@ -38,10 +38,9 @@
 
   <!-- PreLoader -->
   <div id="preloader">
-    <div id="status">
+      <div id="loader"></div>
-      <div class="spinner"></div>
     </div>
-  </div>
+
   <!--Preloader-->
 
   <!-- Mobile Canvus Menu -->
@@ -192,8 +191,8 @@
       <div class="hero-1-content">
         <div class="hero-image text-center">
           <img src="img/hero/hero-1.png" class="img-fluid" data-aos="fade-up" alt="Hero"> </div>
-        <h1 class="title">Bienvenido al Centro de Soporte de <br><span style="color: black;">La Pieza.<span style="color: #E63108;">DO</span></span></h1>
+        <h1 class="title">Necesitas Ayuda?</h1>
-        <p class="mt-20 mb-50 ">Tienes preguntas? Busca en nuestro Centro de Ayuda.</p>
+        <p class="mt-20 mb-50 ">Busca en nuestro Centro de Apoyo.</p>
         <form class="search-form round ">
           <input type="text" placeholder="Escribe aquí tu busqueda…">
           <button type="submit"><i class="ri-search-2-line"></i> <span