This is my simple code
http://jsfiddle.net/6hLf6/1/
when I open the jsfiddle on my IE, it is working perfectly.
but when I open the code locally, it looks like this:
I am using IE11
this is my css
#loading {
margin: 80px auto;
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #ccc;
font: 12px "Lucida Grande", Sans-Serif;
text-align: center;
line-height: 100px;
color: white;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#loading:before {
content: "";
position: absolute;
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
background: #eee;
z-index: -2;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid rgba(255,255,255,0.7);
z-index: -1;
top: -28px;
left: 0px;
-webkit-animation: ticktock 5s linear infinite;
-moz-animation: ticktock 5s linear infinite;
animation:ticktock 5s linear infinite;
-webkit-transform-origin: 50px 80px;
-moz-transform-origin: 50px 80px;
transform-origin:50px 80px;
}
#loading strong {
overflow: hidden;
display: block;
margin: 0 auto;
-webkit-animation: expand 2.5s linear infinite;
-moz-animation: expand 2.5s linear infinite;
animation:expand 2.5s linear infinite;
}
#-webkit-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-webkit-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#-moz-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-moz-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
I tried to handle the css on IE, that is why it is working on jfiddle but not when I run the code on localhost.
what should I do plesae?
Edit
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="loading.css"/>
</head>
<body>
<div id="loading"><strong>loading...</strong><span></span></div>
</body>
</html>
Using XHTML 1.0 strict the following HTML works with your CSS to provide the desired effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="loading">
<strong>loading...</strong>
<span></span>
</div>
</body>
</html>
Please compare the above code with the HTML you are using.
Edit:
I managed to replicate your error by enabling compatibility mode. Please click on the gear in the top right of internet explorer then click compatibility view settings and check your domain is not on the 'websites you've added to compatibility view' list if it is remove it from the list. Also un-check display intranet sites in compatibility view. Then try opening it.
You need to add:
<!DOCTYPE html>
At the top of your code otherwise the page will not be displayed using ie 11
Related
Hi there I want to give this effect to my logo
but somehow I am stuck can you help me please? I want the circles to be show one in after another but only when shown the fourth circle only then the efect can end. Sorry for my english. Please help
html,
body {
color: #2E4453;
font-size: 100%;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 400;
background-color: #D1C4E9;
}
.open-dev-radar {
position: relative;
width: 100%;
padding-top: 100%;
}
.open-dev-badge {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
/* padding: 15px; */
border-radius: 50%;
background-color: #fff;
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.34);
}
.gt-dev {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.gt-dev:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius: 50%;
border: solid 1px rgba(103, 58, 182, 0.74);
background-image: -webkit-radial-gradient(circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
background-image: radial-gradient( circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
filter: alpha(opacity=0);
}
.gt-dev:nth-child(4) {
width: 120px;
height: 120px;
}
.gt-dev:nth-child(3) {
width: 190px;
height: 190px;
}
.gt-dev:nth-child(3):after {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.gt-dev:nth-child(2) {
width: 270px;
height: 270px;
}
.gt-dev:nth-child(2):after {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.gt-dev:nth-child(1) {
width: 370px;
height: 370px;
}
.gt-dev:nth-child(1):after {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=0);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=50);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=100);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripple Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="open-dev-badge"><img src="Loader.svg"></div>
</body>
</html>
I would use a slightly different approach.
As the circles are purely for decoration, not containing information that needs to be interpreted e.g. by a screen reader, I'd have the logo contained entirely within one element and put the background overall color on that element and the circles on its before pseudo element.
Then use a CSS animation to draw the circles with radial-gradient backgrounds one by one.
In this snippet the colors required are defined as CSS variables col1... so you can change them easily if needed. The animation works by setting the colors in the radial gradient background one by one.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: #303030;
}
.logo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
display: inline-block;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
--c1: var(--col1);
--c2: var(--col2);
--c3: var(--col3);
--c4: var(--col4);
background-image: radial-gradient(var(--c1) 0 10%, var(--c2) 10% 20%, var(--c3) 20% 30%, var(--c4) 30% 40%, transparent 40% 100%);
}
.logo::before {
animation: ripple 4s linear;
}
#keyframes ripple {
0% {
--c2: transparent;
--c3: transparent;
--c4: transparent;
--c1: var(--col1);
}
33.33% {
--c2: var(--col2);
}
66.66% {
--c3: var(--col3);
}
100% {
--c4: var(--col4);
}
}
<div class="logo"></div>
Note: you will want to change the %s in the radial gradient to get the effect you want (or change to px if you want exactly the same widths on any viewport dimensions).
UPDATE: from subsequent comments it transpires that the problem is actually simpler than the solution given above. Rather than each ring appearing in a step, it is required that the rings grow til they reach the required size, then the next ring grows.
We can get this effect by having the multi ring background on a pseudo element all the time (no need to change it dynamically like in the above) and simply increase its size from zero so the rings appear to grow in a continuous way.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
}
.logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: radial-gradient(var(--col1) 0 10vmin, var(--col2) 10vmin 20vmin, var(--col3) 20vmin 30vmin, var(--col4) 30vmin 40vmin, transparent 40vmin 100vmin);
animation: ripple 4s linear 1;
animation-fill-mode: forwards;
border-radius: 50%;
z-index;
-1;
}
#keyframes ripple {
0% {
width: 0;
height: 0;
}
100% {
width: 100vmin;
height: 100vmin;
}
}
.logo::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: #303030;
z-index: -2;
}
<div class="logo"></div>
I have some codes now but it does not feel 'natural' like HTML5's video element's loader.
How can I finetune this CSS3 loader to be more similar to the video element's one?
Right now I have 2 elements rotating constantly with a short delay in between.
I just don't see if I need to raise this delay, or need some more sophisticated animation with bezier:
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #555555;
margin: 15px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 0.4em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.4em;
background: black;
border-radius: 10.4em 0 0 10.4em;
top: -0.2em;
left: -0.2em;
-webkit-transform-origin: 5.2em 5.2em;
transform-origin: 5.2em 5.2em;
-webkit-animation: load 1.2s infinite ease 0.2s;
animation: load 1.2s infinite ease 0.2s;
transition-timing-function: cubic-bezier(1.0, 0.5, 1.0, 0.1);
}
.loader:after {
width: 5.2em;
height: 10.4em;
background: black;
border-radius: 0 10.4em 10.4em 0;
top: -0.2em;
left: 5.0em;
-webkit-transform-origin: 0.0em 5.2em;
transform-origin: 0.0em 5.2em;
-webkit-animation: load 1.2s infinite ease;
animation: load 1.2s infinite ease;
transition-timing-function: cubic-bezier(0.1, 1.0, 0.5, 1.0);
}
#-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader .label {
font-size: 16px;
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor=black>
<h2>How To Create A Loader</h2>
<div class="loader"><div class="label">Loading...</div></div>
</body>
</html>
For example here is a simple spinner which I'm looking for (it also changes its color, but it is out of this question):
Material design also uses this as loader and here is a JS + CSS solution but I need something without SVG (pure CSS3): https://www.jqueryscript.net/demo/Material-Design-Style-Loading-Spinner-with-jQuery-CSS3/
In case anyone is seeking for this, I have found a very nice solution:
https://materializecss.com/preloader.html.
It's a pure CSS solution, no SVG and no JS is needed.
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()
I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle.
My need:
Width-50px
Height -50px
border size as per the image file attached -circle border fill sample image
My code
#loading
{
width: 100px;
height: 100px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow
{
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow
{
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold
{
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 100px, 100px, 50px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span
{
background-color: #f50;
}
.fill
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.left .fill
{
z-index: 1;
-webkit-animation: left 1s linear ;
-moz-animation: left 1s linear ;
animation: left 1s linear both;
}
#keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
.right
{
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill
{
z-index: 3;
-webkit-animation: right 1s linear ;
-moz-animation: right 1s linear ;
animation: right 1s linear both ;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes right
{
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
My code in jsfiddle...!
You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
edit: in respond to comment #Filipe
How would the change from clip to clip-path be? I tried (also changing rect to inset), but the animation stops working.
Possible example with clip-path instead clip .
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
is this what you expect,hope this will help to you.try this.I only concerned about the circle size of 50 px with inside circle.if this is not the case tell me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<style type="text/css">
div.circleone{
width: 50px;
height: 50px;
border-radius: 25px;
box-shadow: 1px 2px 1px black;
}
div.circletwo
{
width: 25px;
height: 25px;
border-radius: 12.5px;
box-shadow: 1px -1px 1px black;
position: relative;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="circleone">
<div class="circletwo"></div>
</div>
</body>
</html>
How do I make the below animation fully work in safari browser ? It is working fine in Chrome.
Open the below link in chrome to see its full functionality (bounce and pulse effect), and in Safari to see the issue. Pulse effect around the pin doesn't work in safari!!
How can I fix this ?
Here is the JS FIDDLE link
html code:
<div class='pin bounce'></div>
<div class='pulse'></div>
CSS code:
body {
background: #e6e6e6;
}
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: 11px 0px 0px -12px;
-webkit-transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
-webkit-animation-delay: 1.1s;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
}
}