Spinner not spinning - html

Question

I have a spinner that I am using for a long running operation but I cannot get it to spin. I have read the other SO questions related to this but none of them seem to get my scenario working.
I have the following HTML
<div class="ms-BasicSpinner">
<div class="ms-Spinner">
<div class="ms-Spinner-circle ms-Spinner--large"></div>
<div class="ms-Spinner-label">Creating...</div>
</div>
</div>
and CSS
.ms-Spinner > .ms-Spinner-circle.ms-Spinner--large {
width: 28px;
height: 28px;
}
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}
.ms-Spinner > .ms-Spinner-label {
color: #0078d7;
margin-top: 10px;
text-align: center;
}
.ms-BasicSpinner .ms-Spinner {
display: inline-block;
margin: 10px 0;
}
I also have to following JSFiddle https://jsfiddle.net/20ufspze/
What am I missing to get the spinner to spin?
Any help much appreciated
Thanks in advance

Answer 1

You apply the cubic bezier function to a rotation to get the desired effect. Adapting the bottom element here you can rotate the blue part with:
#-webkit-keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And by rewriting the cubic-bezier part as:
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);

Answer 2

Best practice to animate any HTML component is use animation keyframes in CSS.
#keyframes anim {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
...
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
animation: anim 1.3s infinite;
}
...
Fiddle Link : https://jsfiddle.net/8Ly697ne/