As you will see from the code below I have a lovely circular progress bar however I have a few questions and a little lost on how to achieve this (ideally I don't want to use any JS)
I want to make the pink bar that goes around be curved and not
flat, is this possible? like the edge of it. So instead of it being
| it would be a little like ) at the start and end.
The throbbing circle in the middle, is it possible for it to pause
for like 1 second once animation is complete before it starts
again?
/* Load Progress Animation */
#-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
#keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
I've re-written the entire code.
For your first question, you could simply use stroke-linecap="round".
For the second one, you will have to add an extra #keyframes rule for the delay.
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
No. 1. is possible using stroke-linecap, but it requires some changes to your code, becasue in your case the red line is actually a background and the gray the stroke - so it would result in a concave circle, so "(", not ")" at the end of the red line. 2. can be done using longer animation set to alternate so it "sleeps" between 50% and 100% and back. I've made some changes:
http://jsfiddle.net/3yq3kmo1/
Changes in SVG (the second element):
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS (note that the dashoffset has been reversed, so now a red stroke grows and hides the gray, instead of red shrinking and revealing the gray; the stroke on path in first SVG element is gray now.)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
The pause in animation:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
Related
I'm trying to create a wave animation with 3 layers. The animation as you can see in the snippet, doesn't seem smooth, and it seems like the waves aren't endless. Besides I can't really get to see the waves structure like in the picture.
I would to see the waves without interruption, when it comes to the end of the animation, it is clearly noticeable that the animation has ended.
[![
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 4.5s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4.5s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(4);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(4);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
The wave animations should move smoothly, so instead of using the linear attribute, we use ease-in-out.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 5s ease-in-out infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4s ease-in-out infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 6s ease-in-out infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
Here is my solution, I hope it helps you.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 6s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 6s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
I'm trying to get a simple CSS3 animation on a SVG. Till now it works fine in Firefox and Chrome but not on Safari.
I added #-webkit-keyframes so it should work, but it doesn't.
I just started to code, so I may have gone wrong everywhere but I really need help!
#EYEBROW2 {
-webkit-animation: MoveEyebrow2 3s linear 2.2s 1 both;
-webkit-transform-origin: 57% 10%;
animation: MoveEyebrow2 3s linear 2.2s 1 both;
transform-origin: 57% 10%;
}
#-webkit-keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
#keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
<div>
<svg width="500" height="100">
<g id="EYEBROW2"> <g> <path class="st9" d="M415.4,26.1l-8.6-0.5C406.3,21.8,415.6,26.2,415.4,26.1z" stroke="black" fill="black"/> </g> </g>
</svg>
</div>
But if I try to run the animations everything goes wrong! It's like it doesn't recognize the transform-origin point.
Can anyone help me?
I didn't asked about transform origin. I asked why the animation doesn't work on mozilla
I'm stuck doing some animation svg on Mozilla. What I have tried in Chrome the animation worked perfectly fine, but when I tested on mozilla it's doesn't work well. I have put the vendor prefix, still the animation doesn't work properly.
I can't share the svg because the line of code to share here is limited, So please check it out from the demo.
Here is the DEMO
CSS
.trans-animate {
-webkit-transform: translate(-24%,9%);
transform: translate(-24%,9%);
-webkit-animation: wavedash 6s ease-out infinite;
animation: wavedash 6s ease-out infinite;
}
#-webkit-keyframes wavedash {
0% {
-webkit-transform: translate(-28%,9%);
transform: translate(-28%,9%);
}
50% {
-webkit-transform: translate(-42%,9%);
transform: translate(-42%,9%);
}
100% {
-webkit-transform: translate(-20%,9%);
transform: translate(-20%,9%);
}
}
.trans-animate2 {
-webkit-transform: translate(-38%,2%);
transform: translate(-38%,2%);
-webkit-animation: wavedash2 10s ease-out infinite;
animation: wavedash2 10s ease-out infinite;
}
#-webkit-keyframes wavedash2 {
0% {
-webkit-transform: translate(-28%,2%);
transform: translate(-28%,2%);
}
50% {
-webkit-transform: translate(-5%,2%);
transform: translate(-5%,2%);
}
100% {
-webkit-transform: translate(8%,2%);
transform: translate(8%,2%);
}
}
.dolphin-loca {
/*transform: translate(-166%,69%);*/
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
50% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
65% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
80% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
}
.text-dolphin {
-webkit-animation: dolphin-button 8s ease-out infinite;
animation: dolphin-button 8s ease-out infinite;
}
#-webkit-keyframes dolphin-button {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
50% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 0;
}
65% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
78% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
85% {
-webkit-transform: translate(-162%, -60%);
transform: translate(-162%, -60%);
opacity: 0;
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
}
.closeEye {
-webkit-animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
}
#-webkit-keyframes eye {
0% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
10% {
-webkit-transform: translateY(265px) scaleY(0.05);
transform: translateY(265px) scaleY(0.05);
}
15% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
25% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
30% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
35% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
40% {
-webkit-transform: translateY(255px) scaleY(0.1);
transform: translateY(255px) scaleY(0.1);
}
100% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
}
There are two reasons your animation doesn't work on Firefox.
The primary reason is that you have #-webkit-keyframes rules, which work in Chrome, but you have no #keyframes rules, which Firefox needs. You need to include both variants.
The second reason is related to the transform-origin difference between Firefox and Chrome.
Percentages in SVG files are relative to the viewport size (the dimensions of the SVG). That's what Firefox does. So translate(-172%,40%) is putting the dolphin way off the edge of the SVG.
Chrome is calculating percentages relative to the dimensions of the dolphin. That is not the correct behaviour.
If you want your animation to work in both browsers, you need to switch to using absolute pixel values in your transform rules (eg. 100px).
.dolphin-loca {
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
#keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
<svg x="0px" y="0px" width="1600px" height="450.39px" viewBox="0 0 1600 450.39">
<g id="Layer_7" class="dolphin-loca" >
<path id="XMLID_29_" fill="#0083B7" d="M805.419,255.439c0-44.307-28.647-75.028-71.876-79.144 c1.21-4.736,2.37-7.935-2.083-7.935c-3.665,0-8.222,3.306-11.537,7.72c-44.529,2.807-74.611,34.122-74.611,79.359 c0,12.658,2.772,23.054,7.724,31.504c-4.966,9.543-5.992,22.504-1.546,28.282c5.617,7.3,8.705-3.645,17.415-11.529 c15.167,10.519,32.232,14.748,56.46,14.748c2.102,0,4.185-0.033,6.248-0.098c-0.163,6.328-2.354,13.155-7.468,20.396 c-3.842-5.743-20.614-27.065-47.537-8.519c-1.583,1.09,17.322,28.912,44.758,12.288c-0.328,0.717-0.755,2.152,1.434,1.581 c-4.001,6.03-9.983,19.613,5.826,32.179c1.107,0.88,16.966-18.865-2.171-34.437c5.641-3.797,16.995-12.42,26.062-25.462 c13.228-2.205,20.431-6.272,29.324-12.662c8.699,7.883,11.786,18.811,17.4,11.515c4.446-5.778,3.42-18.739-1.546-28.282 C802.648,278.493,805.419,268.097,805.419,255.439z M725.366,314.436c-44.229,0-74.917-14.978-74.917-59.207 s30.688-74.401,74.917-74.401c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z" />
</g>
</svg>
I can't get to vertical align my preloader svg. Is displayed below that 50% height of the screen. The dark border represents the 50% of the screen so is just for demo purpose.
Any help is appreciated.
jsfiddle demo
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
Keyframes outer's transform property overriding .preloader's transform property, You can use top: calc(50% - 17px); or transform: rotate(360deg) translate(-50%, -50%);.
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: calc(50% - 17px);
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
You should update your css and use flex to get the same
Working fiddle fiddle code
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
display:flex; /* Add this */
justify-content:center; /* Add this */
align-items:center; /* Add this */
flex-flow:column nowrap; /* Add this */
position:relative; /* Add this */
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: block;
position: absolute; /* Add this and remove top, bottom, left and transform */
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
body, html {
height: 100%;
padding:0px;
margin:0px;
}
.demo-square1{
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing:border-box;
position:absolute;
top:0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
position:relative;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: block;
position: absolute;
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
Hi guys so im hitting a brick wall with 2 issues:
IE the pulse in the middle works but not the circular progress
In safari (win) the curcluar progress does not work
Firefox and Chrome work fine
Any ideas? i literally only have a few hours ot crack this.
NOTE: You have to click on the circle in order to start the animation. Thanks in advance for any help in cracking this for me.
JSFiddle: http://jsfiddle.net/0pkqk5r0/1/
HTML:
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
CSS:
/* temp */
body {
background: #072237;
}
h3, p {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
cursor: pointer;
}
#ring.active {
-webkit-animation: load 6s 1 forwards;
-moz-animation: load 6s 1 forwards;
-o-animation: load 6s 1 forwards;
-ms-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FFFFFF;
border-radius: 50%;
}
#circle.active {
background: #FF1251;
-webkit-animation: pulse 1.2s 3;
-moz-animation: pulse 1.2s 3;
-o-animation: pulse 1.2s 3;
-ms-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* Pulse */
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-moz-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-o-keyframes pulse {
0% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-o-transform: scale(1);
transform: scale(1);
}
40% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-ms-transform: scale(1);
transform: scale(1);
}
40% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
/* Loading */
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
The shorthand animations will work on:
IE10+
Safari 9+
Use HTML+TIME for older versions of IE:
.time {behavior: url(#default#time2)}
<div id="circle" class="time" begin="0" end="2" timeAction="style">
Use longhand for older versions of Safari:
#circle.active {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
}
References
Introduction to CSS3 Animations
What's New in Safari
Safari CSS Visual Effects Guide
Internet Explorer 10 Guide for Developers
Internet Explorer 10 on Windows 7
HTML+TIME Specification
time2 Behavior
Using the HTML+TIME Document Object Model (DOM)
Animated DHTML
BUG: HTML+TIME Code Fails Inside an Element Behavior