Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
Related
I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?
Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>
This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>
The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>
In the following snippet you can see a space between h2 and animation. I want it remove it in my case.How can I do this?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<h2>xyzxyzxyzxyz.
<div class="loader" style="float:right;"></div>
</h2>
JSFIDDLE: https://jsfiddle.net/wdzLv7tk/
Float:right cause the problem. There are so many ways to keep the element side by side. I applied one of them. Here I have display:table for my parent element and for each child it is display:table-cell which gives a solution to your problem.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.parent {
display: table;
margin:auto;
}
.child {
display: table-cell;
}
h2 {}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<div class="parent">
<h2 class="child">xyzxyzxyzxyz.</h2>
<div class="loader child" style=""></div>
</div>
Just use text-align: right instead of text-align: center
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h2 {
text-align: right;
}
<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>
I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
#keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Just remove this line transform: translateY(-50%) !important; and it will work like here:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="pageloading-mask">
<div></div>
</div>
see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate