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
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);
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/
Related
I am working on circular progress bar using HTML & CSS. HTML content is under for loop. Here, I tried with same 5% but the result of progress is different
.progress{
width: 120px;
height: 120px;
line-height: 120px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 15px solid #f2f5f5;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 100%;
height: 100%;
font-size: 14px;
font-weight: bold;
text-align: center;
position: absolute;
}
.progress .progress-value.red {
color: #f74d4d;
}
.progress .progress-value.dark-yellow {
color: #f78c4d;
}
.progress .progress-value.yellow {
color: #f7f24d;
}
.progress .progress-value.green {
color: #28b779;
}
.progress.red .progress-bar{
border-color: #f74d4d;
}
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-bar{
border-color: #f78c4d;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color:#f7f24d;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #28b779;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
.progress > span {
background-color: none;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="component-progress-info">
<div class="component-progress">
<div class="progress <?php echo $componentclass; ?>">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value red">5%</div>
</div>
</div>
<div class="component-info">
</div>
</div>
I have html inside a for-loop. But it is resulting me different response
Looking at the CSS (just the relevant parts):
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
Different colors are set to use different keyframes, for example loading-3 for yellow, loading-5 for green, as seen above.
The keyframes then are defined with different rotations. Looking at two of them as an example:
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
Here loading-2 transforms from 0deg to 144deg.
Below loading-3 transforms from 0deg to 90deg.
Should the keyframes not be the same for every progress bar? Only the background color should change. But you define different keyframes for different colors, which is probably the cause if not part of it.
I have this code in my project:
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
}
#-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
My triangle currently rotates fine, and at the right speed, but it isn't rotating at the centre point of the triangle. It seems to rotate from a point slightly off from the centre.
Also, how do I show only the border of the triangle and not the full solid blue?
Any help would be greatly appreciated!
Thank you!
You need to adjust the transform-origin to 50% 66%
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
transform-origin: 50% 66%;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
I have two circles with pulse animation infinite times. Now I need animating the circle one after another continuously with infinite times. I tried pulsation the circle infinite times. I have added delay animation but it is not working I don't why. Please kindly refer the code and help to achieve that functionality:
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
Css:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
thanks in advance
You can add the same class to all circles for common properties. The only properties you need different for each is animation-delay.
You can use a small jQuery code to set that for any number of divs. I have created an example for 3 divs, but feel free to extend it.
let els = $(".inner"),
length = $(".inner").length
els.each(function(index) {
$(this).css('animation-delay', (index / length) + 's')
})
.inner {
display: inline-block;
vertical-align: top;
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
margin: 10px;
animation: pulse 1s infinite linear;
}
#keyframes pulse {
0% {
transform: scaleX(1)
}
50% {
transform: scale3d(1.05, 1.05, 1.05)
}
to {
transform: scaleX(1)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
animation-delay is working:
.inner {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
animation-delay: 5s
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
<div class="inner">one
</div>
<div class="inner1">two
</div>
Only Add animation Delay= .5s; and reduce second animation time with 1s
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
CSS:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 1s infinite;
animation-delay: .5s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
I have struggling to understand why my circle animation for my website works perfectly for browsers such as Chrome, IE, Opera, and Firefox, but fails to work for Safari.
JSFiddle
Website
.circle {
width: 45%;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
animation: sway 2s infinite ease-in-out;
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left"><div><span>Coding</span><br><p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web development</i>.</p></div></div>
<div class="circle" id="right"><div><span>Design</span><p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful functionality</i></p></div></div>
Fixed your code:
JSFiddle
.circle {
width: 45%;
}
.circle:after {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left">
<div>
<span>Coding</span>
<p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web
development</i>.
</p>
</div>
</div>
<div class="circle" id="right">
<div>
<span>Design</span>
<p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful
functionality</i>
</p>
</div>
</div>
Be attentive — there no values: -webkit-rotate, -ms-rotate, -moz-rotate, -o-rotate. The latest versions of other browsers support non-prefixed property transform: rotate() and ignore others, but -webkit-transform: rotate() is needed for Safari.
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;