2

Tengo este código:

.vjs-loading-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: .85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, .7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  visibility: visible;
}

.vjs-loading-spinner::after,
.vjs-loading-spinner::before {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: #fff;
}
<div class="vjs-loading-spinner"></div>

Lo quiero hacer es darle efecto con JavaScript al spinner que se forma, lo que se me ocurre es aplicar un css a estas clases: .vjs-loading-spinner::after y .vjs-loading-spinner::before ya que estas forman el medio circulo que pretendo ir moviendo para dar el efecto deseado, lo que tengo es esto:

$(".vjs-loading-spinner::after, .vjs-loading-spinner::before").css("transform": "rotate(90deg)");

El problema es que no hace nada, no se si porque a las clases que tienen una pseudoclase no se le puede aplicar css con jquery o javascript, o no se que este haciendo mal.

2
  • 1
    Tenes un error de sintaxis, es "transform", "rotate... (params separados por coma). Si la idea es rotar ambos pseudo elementos ¿rotar el elemento no seria lo mas simple? eg: $(".vjs-loading-spinner").css("transform", "rotate(90deg)");
    – Marcos
    Commented el 8 ene. 2021 a las 19:45
  • Hola @Jorge, responde esto a tu pregunta Commented el 9 ene. 2021 a las 9:00

1 respuesta 1

0

Debes agregar un @keyframes y aplicarle a los :before, :after y esta es una forma de como hacerlo:

$( document ).ready(function() {

$(".vjs-loading-spinner").css('display','block');

});
.vjs-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: .85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, .7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  visibility: visible;
}

.vjs-loading-spinner::after,
.vjs-loading-spinner::before {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: #fff;
}

.vjs-loading-spinner::after,
.vjs-loading-spinner::before {
   animation: animate 0.5s linear infinite;
 }

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="vjs-loading-spinner"></div>

Espero esto solucione tu duda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.