Me gusta crear varios elementos de interfaz, y una vez que quería hacer un precargador.
Para implementarlo, necesitaba el siguiente marcado:
<div class="preloader"></div>
Según mi idea, el precargador consta de dos cuadrados: uno grande con un tamaño de 60x60px y uno pequeño, 15x15px.
Como un cuadrado grande es un esquema para uno pequeño, utilicé el elemento div .prealoder para implementarlo. Pero para un cuadrado anidado, necesitaba un pseudo-elemento antes.
.preloader { width: 60px; height: 60px; border: 2px solid #fff; position: relative; } .preloader::before { content: ""; width: 15px; height: 15px; background-color: #fff; position: absolute; top: calc(50% - 7.5px); left: calc(50% - 7.5px); }
Para la animación, escribí el siguiente script:
.preloader::before { animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } }
Además de la pantalla principal, quería agregar un precargador con las dimensiones del contorno 120x120px y el cuadrado interior 30x30px.
.preloader_l { width: 120px; height: 120px; } .preloader_l::before { width: 30px; height: 30px; top: calc(50% - 15px); left: calc(50% - 15px); animation-name: preloader-l; } @keyframes preloader-l { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-30px, -30px, 0) scale(1); } 40% { transform: translate3d(30px, -30px, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1); } 60% { transform: translate3d(-30px, 30px, 0) scale(1); } }
Todo salió según lo planeado. Fui a tomar té y se me ocurrió que si necesitaba agregar otro tamaño, nuevamente tendré que indicar los tamaños (ancho y alto), la posición (arriba y la izquierda) y el guión de animación.
Para arreglar esto, usaré la unidad de medida em. Con él, podré vincular todos los valores de propiedad a un solo valor de tamaño de fuente, con lo que cambiaré las dimensiones del precargador.
Como resultado, el código cambiará de la siguiente manera:
.preloader { width: Xem; height: Xem; font-size: Xpx; } .preloader::before { width: Xem; height: Xem; animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-Xem, -Xem, 0) scale(1); } 40% { transform: translate3d(Xem, -Xem, 0) scale(1); } 50% { transform: translate3d(Xem, Xem, 0) scale(1); } 60% { transform: translate3d(-Xem, Xem, 0) scale(1); } } .preloader_l { font-size: Xpx; }
Solución
Para resolver el problema, la fórmula de cálculo em es útil para mí:
Vem = Vpx / Fs
Vpx es el valor en px que se configuró previamente. El valor Fs es un número coincidente por el cual es conveniente dividir el valor Vpx.
Ahora puede comenzar a calcular las siguientes propiedades:
.preloader { width: 60px; height: 60px; } .preloader::before { width: 15px; height: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); }
Para hacer esto, seleccione el valor del tamaño de fuente. Según mi idea, esta propiedad establecerá las dimensiones del contorno, por lo que es lógico usar el mismo valor que ahora se establece para ancho y alto.
Width(em) = 60px / 60px = 1em Height(em) = 60px / 60px = 1em
.preloader { width: 1em; height: 1em; font-size: 60px; }
A continuación, calcularé los valores de ancho, alto, superior e izquierdo del elemento .preloader :: before. Para hacer esto, ya no necesita seleccionar el valor del tamaño de fuente, ya que se heredará del tamaño de fuente del elemento .preloader.
Width(em) = 15px / 60px = 0.25em Height(em) = 15px / 60px = 0.25em Top(em) = 7.5px / 60px = 0.125em; Left(em) = 7.5px / 60px = 0.125em;
.preloader::before { width: 0.25em; height: 0.25em; top: calc(50% - 0.125em); left: calc(50% - 0.125em); }
Queda por cambiar los valores en el guión de animación.
@keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } }
Si observa los valores sin tener en cuenta el signo, solo necesita traducir 15px. Ya he hecho esto antes y corresponden a 0.25em.
@keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-0.25em, -0.25em, 0) scale(1); } 40% { transform: translate3d(0.25em, -0.25em, 0) scale(1); } 50% { transform: translate3d(0.25em, 0.25em, 0) scale(1); } 60% { transform: translate3d(-0.25em, 0.25em, 0) scale(1); } }
Ahora puede establecer el tamaño en 120 px para el elemento .preloader_l.
.preloader_l { font-size: 120px; }
Vale la pena señalar que eliminé la regla CSS .preloader_l :: before y el script de animación preloader-l porque ya no son necesarios.
Tarea
Para consolidar este truco, preparé una tarea. Requiere traducir los valores de px a em, que se utilizan en el script de animación. Todos los valores de propiedad calculados previamente se conservan.
@keyframes preloader { 0%, 70%, 100% { transform: translate3d(0, 0, 0) scale(0); } 10%, 60% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(9px, -21px, 0) scale(1); } 30% { transform: translate3d(3px, 21px, 0) scale(1); } 40% { transform: translate3d(-9px, -21px, 0) scale(1); } 50% { transform: translate3d(-9px, 21px, 0) scale(1); } }