I have the following SVG line:
svg#line_loader {
position: relative; float: left; clear: none; display: block;
width: 100%; height: 8px; margin: 0; padding: 0;
stroke: rgb(255, 205, 0);
stroke-width: 10; stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: dash 1s linear forwards infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 100; }
}
<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>
However the animation ends up looking jagged.
Take a look at: jsFiddle
You need each iteration to end in the same start position. This means that the offset should be 100%, and the dashes should be a percentage of the containers width:
svg#line_loader {
position: relative; clear: none; display: block;
width: 100%; height: 8px; margin: 0; padding: 0;
stroke: rgb(255, 205, 0);
stroke-width: 10; stroke-linecap: round;
stroke-dasharray: 25%;
animation: dash 1s linear forwards infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 100%; }
}
<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>
Related
I need to convert the tick mark to a cross mark, I have no knowledge of SVG, so anyone can convert the following tick animation to a cross animation?
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
I have tried my best but the tick join point doesn't splits, tick tail and head attached, any help will be appreciated.
My thought process:
Not really a StackOverflow-worthy question...
But I am a sucker for SVG
I'm gonna do it anyway.
So here you go! I've just changed the <path /> for you.
d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"
Start in the top-left (at 14.1,14.1), go diagonally down-right for 23.8 units, then "pick up the pen" and move 23.8 units up before going down-left for 23.8 units.
Looks good to me!
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"/></svg>
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
I can not seem to make the background image visible at all times while remaining the same effect, making the fill transparent gets rid of the animation, I also tried to play around with z-index on various elements but without success, how can I make it so that the background image is visible inside the white line instead of the pink svg?
I also tried applying the same image to the pink SVG as fill and it kind of works, I just can not seem to make the image appear like how it would if it was full screen, it also makes the page a bit slow:
#fg {
fill: url(#image);
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
<pattern id="image" width="1" height="1">
<image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"></image>
</pattern>
You can get rid of the pink with fill-opacity. But you would need to adjust the white "background" as it overlays the background-image.
You might need to change the shape for that.
You could also include the image as a layer in the svg.
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
fill-opacity: 0;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
opacity: .5;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
I'm trying to imitate the loader/Progress spinner from angular material. So far I made the following component. But I don't know why the length of the dash isn't changing.
body {
background-color: white;
}
// demo-specific
.showbox {
position: absolute;
}
// end demo-specific
.loader {
position: relative;
margin: 0 auto;
width: 100px;
&:before {
content: '';
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out infinite;
stroke-linecap: round;
stroke: #0057e7;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 20, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 200, 200;
stroke-dashoffset: -125px;
}
}
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</div>
The problem to me looks like it is going straight from 0% to 50%, where are the example they transition from 0% to 10% etc etc etc. Simply include more steps between 0 and 50%.
I have found the following code, Link, it works perfectly but the problem is that I can only make the percentage 25, 50 or 75. If I want to make it 85% the circle fills up fully. Anyone any idea what I have to do? Maybe some JavaScript or JQuery that I have to add? Thanks!
Here is the HTML:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>
Iy's not a script so it's not automatically fit to any percentage. In that pen, the author defined only those 4 percentage. Here I added 85% too. But if you want to do this dynamically, you need to use a script.
Take a look:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='85'] .outer {
stroke-dashoffset: 83;
-webkit-animation: show85 2s;
animation: show85 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>
I want to resize my first SVG circle from here, so I made the second, but there is a problem in the animation, the animation is not the same.
HTML:
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
CSS:
body, svg, circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
How to properly resize it?
The stroke-dasharray property of the circle element determine the length of the stroke's dash and the space between two dashes whereas the stroke-dashoffset determines the offset at which the stroke's dash starts. Within the #keyframes rules these properties are getting modified and thus ends up producing the animation effect. When the circle's radius (and thus the circumference) is changed, these properties (set within the keyframes) also have to modified in proportion to the radius.
Since the settings depend on the radius of the circle, I don't think you can keep the same animation (#keyframe) settings for both circles. At any time only one of them can work properly.
In the below snippet I have done the changes that are required to make the bigger circle work.
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
Alternately, if you wish to make the same animation (#keyframe) settings work for both the circles at the same time, then you could consider using a transform: scale to create the bigger circle instead of manually modifying the radius of the circle. (But as you can see, the output is not exactly same as modifying the radius and hence I wouldn't really recommend this).
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
.loader2 {
transform: scale(2.2);
}
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 100px;" class="loader loader2">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>