I found a CSS loading spinner here and it works great in IE and Firefox but I can't get it work in Chrome.
I added -webkit to the CSS provided but still nothing. Here is a JSFiddle of the code, test it out in the different browsers.
Is there anything I'm doing wrong or not adding?
HTML"
<div class="small progress"><div>Loading…</div></div>
<div class="progress"><div>Loading…</div></div>
<div class="large progress"><div>Loading…</div></div>
CSS:
#keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 1s infinite steps(8);
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
-webkit-transform-origin: 50% 2.5em;
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
background: #bbb;
}
Add this :
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
Link : Doc
Related
Given these two examples.
Using Hover
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: var(--top);
transition: transform 2s;
transform: translateX(-50%);
text-align: center;
line-height: 40px;
font-size: 1.2em;
}
div:hover {
transform: translateX(-50%) rotate(var(--deg));
}
div:nth-child(1) {
--deg: 180deg;
--top: 20%;
}
div:nth-child(2) {
--deg: -180deg;
--top: 40%;
}
div:nth-child(3) {
--deg: 360deg;
--top: 60%;
}
<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>
Using Animation
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: var(--top);
transform: translateX(-50%);
text-align: center;
line-height: 40px;
font-size: 1.2em;
animation: rotate 2s linear 2s;
}
#keyframes rotate {
to {
transform: translateX(-50%) rotate(var(--deg));
}
}
div:nth-child(1) {
--deg: 180deg;
--top: 20%;
}
div:nth-child(2) {
--deg: -180deg;
--top: 40%;
}
div:nth-child(3) {
--deg: 360deg;
--top: 60%;
}
<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>
As you can see rotate(180deg) and rotate(-180deg) act the same and rotate(360deg) doesn't move at all.
The problem is if you would have it move gradually it acts normally.
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 40px;
font-size: 1.2em;
}
div:hover {
animation: rotate 2s linear;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
25% {
transform: translate(-50%, -50%) rotate(45deg);
}
50% {
transform: translate(-50%, -50%) rotate(90deg);
}
75% {
transform: translate(-50%, -50%) rotate(135deg);
}
100% {
transform: translate(-50%, -50%) rotate(180deg);
}
}
<div></div>
The solution that i found is to replace translate(-50%, -50%) with margins which is not consistent
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: var(--top);
transition: transform 2s;
/* Minus half the width, hard coded not a good idea*/
margin: 0 0 0 -75px;
text-align: center;
line-height: 40px;
font-size: 1.2em;
}
div:hover {
transform: rotate(var(--deg));
}
div:nth-child(1) {
--deg: 180deg;
--top: 20%;
}
div:nth-child(2) {
--deg: -180deg;
--top: 40%;
}
div:nth-child(3) {
--deg: 360deg;
--top: 60%;
}
<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>
So The main question is Why that weird behavior is taking place ?
EDIT : Not looking for just a quick answer (as you can see there's two available) but an explanation as well :)
You need to set an initial rotate(0), so there can be animation between the two states. Set the div's initial transform to:
transform: translateX(-50%) rotate(0);
Transition:
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: var(--top);
transition: transform 2s;
transform: translateX(-50%) rotate(0);
text-align: center;
line-height: 40px;
font-size: 1.2em;
}
div:hover {
transform: translateX(-50%) rotate(var(--deg));
}
div:nth-child(1) {
--deg: 180deg;
--top: 20%;
}
div:nth-child(2) {
--deg: -180deg;
--top: 40%;
}
div:nth-child(3) {
--deg: 360deg;
--top: 60%;
}
body {
overflow: hidden;
}
<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>
Animation:
div {
position: absolute;
width: 150px;
height: 40px;
background: orange;
left: 50%;
top: var(--top);
transform: translateX(-50%) rotate(0);
text-align: center;
line-height: 40px;
font-size: 1.2em;
animation: rotate 2s linear 2s forwards;
}
#keyframes rotate {
to {
transform: translateX(-50%) rotate(var(--deg));
}
}
div:nth-child(1) {
--deg: 180deg;
--top: 20%;
}
div:nth-child(2) {
--deg: -180deg;
--top: 40%;
}
div:nth-child(3) {
--deg: 360deg;
--top: 60%;
}
body {
overflow: hidden;
}
<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>
2021: The bug no more occur
It seems a browser bug (at least on Chrome) as it works fine if your try the code on Firefox.
Let refer to the the specification to explain this. Here is all the different cases of how interpolation between transform should work.
In our case, we will consider the last point where we don't have the same number of transform functions and the browser should handle this by adding the identity transform function from the missing list and in our case it should be rotate(0).
So technically a transition from translate(-50%) to translate(-50%) rotate(360deg) should be the same as a transition from translate(-50%) rotate(0) to translate(-50%) rotate(360deg).
Unless, I am missing something this is for sure a bug as in the case when rotate(360deg) is used alone, Chrome is handling this fine using the second point (when one value is none) which is almost the same as the last point.
Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?
Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.
Type of bar:
.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;
}
+
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Could someone help me please ?
Using SVG
svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 5s linear forwards;
}
#keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#428bca" stroke-width="6" fill="#333" />
</svg>
<!-- VV Click "Run code snippet" for demo -->
Since the right-side animation is shared among all the progress circles, if you want to make one that is less than 50%, you'll have to override that generic style. Then you won't need a left-side animation.
So your CSS would be something like:
.progress.yourDiv .progress-right .progress-bar {
animation: yourAnimation 1.8s linear forwards;
}
.progress.yourDiv .progress-left .progress-bar{
animation: none;
}
Where yourAnimation is the same as the shared right-side rule for .progress .progress-right .progress-bar in the Bootstrap example, except the name is changed.
For an animation to 37.5%, yourAnimation would look like this:
#keyframes yourAnimation{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here's an example, where .yourDiv is .yellow and yourAnimation is loading-3.
.progress {
width: 150px;
height: 150px !important;
float: left;
line-height: 150px;
background: none;
margin: 20px;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
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: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-right .progress-bar {
animation: loading-3 1.8s linear forwards;
}
.progress.yellow .progress-left .progress-bar {
animation: 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(135deg);
transform: rotate(135deg);
}
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">37.5%</div>
</div>
</div>
i have a little issue with the css animation and keyframe feature...
i have a little monster with blinking eyes... the eyes should blink just 0.1s
And then i want to have a duration... and then the animation should loop.
This is my animation/keyframe:
#keyframes blinkingEyes {
0% {
transform: rotateX(0deg);
}
36% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(90deg);
}
}
And this is my animation property:
animation: blinkingEyes 0.15s 1s infinite linear;
JSFIDDLE
I found a workaround with a x% between my start and end value. But nothing works for me.. i hope you could help me
You need several keyframes for this, and then make the animation run infinite times.
See:
#monster {
margin-top: 60px;
height: 93px;
width: 75px;
border-radius: 120px;
background: yellow;
/* text-align: center; */
position: relative;
}
.eye {
height: 12px;
width: 8px;
background: black;
border-radius: 10px;
margin-top: 30px;
float: left;
animation: blinkingEyes 1.5s linear infinite;
}
.eyeLeft {
margin-left: 18px;
}
.eyeRight {
margin-left: 22px;
}
.mouth {
font-weight: 900;
transform-origin: 50% 50%;
/* display: inline-block; */
width: 5px;
margin: 0 auto;
height: 20px;
/* text-align: center; */
/* left: 47%; */
position: absolute;
top: 47px;
transform: rotate(90deg);
left: 35px;
}
#keyframes blinkingEyes {
0%, 97%, 100% {
transform: rotateX(0deg);
}
98%, 99% {
transform: rotateX(90deg);
}
}
<div id="monster">
<div class="monsterBody">
<div class="eye eyeLeft">
</div>
<div class="eye eyeRight">
</div>
<div class="mouth">
)
</div>
</div>
</div>
I'm trying to make a responsive "listening" loader but I'm having some issues trying to center all 3 elements.
See the "clean" JSFiddle here: http://jsfiddle.net/mfaeqxn9/ (the mic, needs to be in the center of the loader).
This is the CSS:
body{
background: #151515
}
#listenericon{
color:#23d05f;
font-size:82px;
}
.circle {
background-color: rgba(0,0,0,0);
border: 20px solid rgba(35,208,95,0.9);
opacity: .9;
border-right: 20px solid rgba(0,0,0,0);
border-left: 20px solid rgba(0,0,0,0);
border-radius: 999px;
width: 200px;
height: 200px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 20px solid rgba(35,208,95,0.9);
opacity: .9;
border-left: 20px solid rgba(0,0,0,0);
border-right: 20px solid rgba(0,0,0,0);
border-radius: 999px;
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
top: -288px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #23d05f;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #23d05f;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
#import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
I've tried the translate 50% version and many others, but since it needs to be responsive I have yet to find a proper solution. I'm fine with flexbox, but so far I havent figured out how to make the divs overlap each other.
Anyone have a good solution for this?
Here's the solution (I have updated the codes as your requirement):
Working demo
#listenericon{
color:#23d05f;
font-size:82px;
margin-top:10px;
width:120px;
display: block;
position: relative;
margin: 0 auto;
padding-top: 78px; }
.mic{
position: absolute;
top: 0;
left: 0;
width:100%; }
Fully Responsive Check Running Code, Two Main Issues : Use Position Absolute if you want to overlap two divs , and control that divs using position relative , check : Fiddle Code
<div class="loader">
<div class="circle"></div>
<div class="circle1"><i id="listenericon" class="material-icons">mic</i></div>
#listenericon{
color:#23d05f;
font-size:82px; margin:10px 0 0 0;
}
.loader{position:relative; float:left; width:100%; height:270px;}