CODEWITHSUNDEEP
htmlcssspinner
Pete
Pete

Reputation: 93

Spinner not spinning

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

Upvotes: 0

Views: 945

Answers (2)

Lovepreet Singh
Lovepreet Singh

Reputation: 128

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/

Upvotes: 2

Dair
Dair

Reputation: 16240

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

Upvotes: 3

Related Questions