Permalink
Browse files

fix(loading): updated animation so it works in edge and safari

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Feb 8, 2017
1 parent 0b945b8 commit 957e28ac51bb2e2f57a7f78fe80a65cbc3917351
Showing with 7 additions and 9 deletions.
  1. +5 −7 src/loading/loading.scss
  2. +2 −2 src/loading/samples/00-small.html
View
@@ -1,6 +1,6 @@
@import "../common/variables";
$offset: 26*3.1416; //r(-gap)*2*3.14
$offset: 22px*3.1416; //r(-gap)*2*3.14
$duration: 1.7s;
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -65,18 +65,16 @@ $ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@keyframes dash {
// +offset because safari doesn't like negative values
0% {
stroke-dashoffset: $offset;
transform: rotate(90deg);
stroke-dashoffset: $offset + $offset;
}
50% {
stroke-dashoffset: $offset/4;
transform: rotate(100deg);
stroke-dashoffset: $offset + $offset/4;
}
100% {
stroke-dashoffset: $offset;
transform: rotate(450deg);
stroke-dashoffset: 0px;
}
}
@@ -1,3 +1,3 @@
<svg class="loading loading--small" width="15px" height="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<circle class="loading__path" cx="15" cy="15" r="12"></circle>
<svg class="loading loading--small" width="15px" height="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">´
<circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>

0 comments on commit 957e28a

Please sign in to comment.