I have this code:
.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>
What I want to do is give effect with JavaScript to the spinner that is formed, what occurs to me is to apply a css to these classes: .vjs-loading-spinner::after
and .vjs-loading-spinner::before
since these form the half circle that I intend to move to give the desired effect, what I have is this :
$(".vjs-loading-spinner::after, .vjs-loading-spinner::before").css("transform": "rotate(90deg)");
The problem is that it doesn't do anything, I don't know if it's because classes that have a pseudoclass can't be applied css
with jquery
or javascript
, or I don't know what I'm doing wrong.
You must add a @keyframes and apply to the :before, :after and this is one way how to do it:
I hope this solves your doubt.