diff --git a/css/load6.css b/css/load6.css index d9dc5ed..382430a 100644 --- a/css/load6.css +++ b/css/load6.css @@ -11,13 +11,11 @@ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); - -webkit-animation: load6 1.7s infinite ease; - animation: load6 1.7s infinite ease; + -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; + animation: load6 1.7s infinite ease, round 1.7s infinite ease; } @-webkit-keyframes load6 { 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%, @@ -35,15 +33,11 @@ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } @keyframes load6 { 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%, @@ -60,9 +54,27 @@ 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } + 100% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } +} +@-webkit-keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } diff --git a/less/load6.less b/less/load6.less index b1dbc77..ba48e82 100644 --- a/less/load6.less +++ b/less/load6.less @@ -15,19 +15,30 @@ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); - -webkit-animation:load6 1.7s infinite ease; - animation:load6 1.7s infinite ease; + -webkit-animation:load6 1.7s infinite ease, round 1.7s infinite ease; + animation:load6 1.7s infinite ease, round 1.7s infinite ease;; } } @-webkit-keyframes load6 {.load6-frames;} @keyframes load6 {.load6-frames;} -.load6-frames() { +@-webkit-keyframes round {.round;} +@keyframes round {.round;} + +.round() { + 0% { + -webkit-transform:rotate(0deg); + transform:rotate(0deg); + } + 100% { + -webkit-transform:rotate(360deg); + transform:rotate(360deg); + } +} +.load6-frames() { 0% { - -webkit-transform:rotate(0deg); - transform:rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, @@ -35,7 +46,6 @@ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } - 5%, 95% { box-shadow: @@ -73,10 +83,7 @@ -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } - 100% { - -webkit-transform:rotate(360deg); - transform:rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, @@ -84,5 +91,4 @@ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } - }