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.
"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)");