update and fix circle loader in safari

loadingio · Nov 9, 2018 · 8a749f7 · 8a749f7
1 parent 775e1fa
commit 8a749f7
Show file tree

Hide file tree

Showing 33 changed files with 466 additions and 451 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [Live Demo](https://loading.io/css/)
 
-12 small, elegant pure css spinners collection for website ajax and loading animation. 
+collection of 12 small, elegant pure css spinners for your website loading animation. 
 
 ![css spinner](https://github.com/loadingio/css-spinner/blob/master/thumbnail.gif?raw=true)
 
@@ -17,17 +17,17 @@
 
 ## Usage
 
-[loading.io](https://loading.io/css/) provides a web interface to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as:
+[loading.io](https://loading.io/css/) provides a [web interface](https://loading.io/css/) to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as:
 
-1. Find and download the html file of desired loader under build/ folder.
+1. Find and download the html file of desired loader under [build/](https://github.com/loadingio/css-spinner/tree/master/build) folder.
 2. Copy its content to the place you want to use this loader.
 3. Done.
 
-Separated CSS and HTML files are also available under build folder so that you can reuse the css to reduce payload size.
+Separated CSS and HTML files are also available under [build](https://github.com/loadingio/css-spinner/tree/master/build) folder so that you can reuse the css to reduce payload size.
 
-We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under src/ folders.
+We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under [src/](https://github.com/loadingio/css-spinner/tree/master/src) folders.
 
-Additionally, you will need vars.styl and basic.styl if you are going to build by yourself. See following section for more detail.
+Additionally, you will need [vars.styl](https://github.com/loadingio/css-spinner/blob/master/vars.styl) and [basic.styl](https://github.com/loadingio/css-spinner/blob/master/basic.styl) if you are going to build by yourself. See following section for more detail.
 
 
 ## Customization

diff --git a/build/circle/main.css b/build/circle/main.css
@@ -1,10 +1,14 @@
 .lds-circle {
  display: inline-block;
- width: 51px;
- height: 51px;
- margin: 6px;
+ transform: translateZ(1px);
+}
+.lds-circle > div {
+ display: inline-block;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
  border-radius: 50%;
- background: #900;
+ background: #fff;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
 @keyframes lds-circle {

diff --git a/build/circle/main.html b/build/circle/main.html
@@ -1 +1 @@
-<div class="lds-circle"></div>
+<div class="lds-circle"><div></div></div>
diff --git a/build/circle/sample.html b/build/circle/sample.html
@@ -1,11 +1,15 @@
 <style type="text/css">
  .lds-circle {
  display: inline-block;
- width: 51px;
- height: 51px;
- margin: 6px;
+ transform: translateZ(1px);
+}
+.lds-circle > div {
+ display: inline-block;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
  border-radius: 50%;
- background: #900;
+ background: #fff;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
 @keyframes lds-circle {
@@ -25,4 +29,4 @@
 }
 
 </style>
-<div class="lds-circle"></div>
+<div class="lds-circle"><div></div></div>
diff --git a/build/default/main.css b/build/default/main.css
@@ -1,76 +1,76 @@
 .lds-default {
  display: inline-block;
  position: relative;
- width: 64px;
- height: 64px;
+ width: 80px;
+ height: 80px;
 }
 .lds-default div {
  position: absolute;
- width: 5px;
- height: 5px;
+ width: 6px;
+ height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
 }
 .lds-default div:nth-child(1) {
  animation-delay: 0s;
- top: 29px;
- left: 53px;
+ top: 37px;
+ left: 66px;
 }
 .lds-default div:nth-child(2) {
  animation-delay: -0.1s;
- top: 18px;
- left: 50px;
+ top: 22px;
+ left: 62px;
 }
 .lds-default div:nth-child(3) {
  animation-delay: -0.2s;
- top: 9px;
- left: 41px;
+ top: 11px;
+ left: 52px;
 }
 .lds-default div:nth-child(4) {
  animation-delay: -0.3s;
- top: 6px;
- left: 29px;
+ top: 7px;
+ left: 37px;
 }
 .lds-default div:nth-child(5) {
  animation-delay: -0.4s;
- top: 9px;
- left: 18px;
+ top: 11px;
+ left: 22px;
 }
 .lds-default div:nth-child(6) {
  animation-delay: -0.5s;
- top: 18px;
- left: 9px;
+ top: 22px;
+ left: 11px;
 }
 .lds-default div:nth-child(7) {
  animation-delay: -0.6s;
- top: 29px;
- left: 6px;
+ top: 37px;
+ left: 7px;
 }
 .lds-default div:nth-child(8) {
  animation-delay: -0.7s;
- top: 41px;
- left: 9px;
+ top: 52px;
+ left: 11px;
 }
 .lds-default div:nth-child(9) {
  animation-delay: -0.8s;
- top: 50px;
- left: 18px;
+ top: 62px;
+ left: 22px;
 }
 .lds-default div:nth-child(10) {
  animation-delay: -0.9s;
- top: 53px;
- left: 29px;
+ top: 66px;
+ left: 37px;
 }
 .lds-default div:nth-child(11) {
  animation-delay: -1s;
- top: 50px;
- left: 41px;
+ top: 62px;
+ left: 52px;
 }
 .lds-default div:nth-child(12) {
  animation-delay: -1.1s;
- top: 41px;
- left: 50px;
+ top: 52px;
+ left: 62px;
 }
 @keyframes lds-default {
  0%, 20%, 80%, 100% {

diff --git a/build/default/sample.html b/build/default/sample.html
@@ -2,76 +2,76 @@
  .lds-default {
  display: inline-block;
  position: relative;
- width: 64px;
- height: 64px;
+ width: 80px;
+ height: 80px;
 }
 .lds-default div {
  position: absolute;
- width: 5px;
- height: 5px;
+ width: 6px;
+ height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
 }
 .lds-default div:nth-child(1) {
  animation-delay: 0s;
- top: 29px;
- left: 53px;
+ top: 37px;
+ left: 66px;
 }
 .lds-default div:nth-child(2) {
  animation-delay: -0.1s;
- top: 18px;
- left: 50px;
+ top: 22px;
+ left: 62px;
 }
 .lds-default div:nth-child(3) {
  animation-delay: -0.2s;
- top: 9px;
- left: 41px;
+ top: 11px;
+ left: 52px;
 }
 .lds-default div:nth-child(4) {
  animation-delay: -0.3s;
- top: 6px;
- left: 29px;
+ top: 7px;
+ left: 37px;
 }
 .lds-default div:nth-child(5) {
  animation-delay: -0.4s;
- top: 9px;
- left: 18px;
+ top: 11px;
+ left: 22px;
 }
 .lds-default div:nth-child(6) {
  animation-delay: -0.5s;
- top: 18px;
- left: 9px;
+ top: 22px;
+ left: 11px;
 }
 .lds-default div:nth-child(7) {
  animation-delay: -0.6s;
- top: 29px;
- left: 6px;
+ top: 37px;
+ left: 7px;
 }
 .lds-default div:nth-child(8) {
  animation-delay: -0.7s;
- top: 41px;
- left: 9px;
+ top: 52px;
+ left: 11px;
 }
 .lds-default div:nth-child(9) {
  animation-delay: -0.8s;
- top: 50px;
- left: 18px;
+ top: 62px;
+ left: 22px;
 }
 .lds-default div:nth-child(10) {
  animation-delay: -0.9s;
- top: 53px;
- left: 29px;
+ top: 66px;
+ left: 37px;
 }
 .lds-default div:nth-child(11) {
  animation-delay: -1s;
- top: 50px;
- left: 41px;
+ top: 62px;
+ left: 52px;
 }
 .lds-default div:nth-child(12) {
  animation-delay: -1.1s;
- top: 41px;
- left: 50px;
+ top: 52px;
+ left: 62px;
 }
 @keyframes lds-default {
  0%, 20%, 80%, 100% {

diff --git a/build/dual-ring/main.css b/build/dual-ring/main.css
@@ -1,17 +1,17 @@
 .lds-dual-ring {
  display: inline-block;
- width: 64px;
- height: 64px;
+ width: 80px;
+ height: 80px;
 }
 .lds-dual-ring:after {
  content: " ";
  display: block;
- width: 46px;
- height: 46px;
- margin: 1px;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
  border-radius: 50%;
- border: 5px solid #900;
- border-color: #900 transparent #900 transparent;
+ border: 6px solid #fff;
+ border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
 }
 @keyframes lds-dual-ring {

diff --git a/build/dual-ring/sample.html b/build/dual-ring/sample.html
@@ -1,18 +1,18 @@
 <style type="text/css">
  .lds-dual-ring {
  display: inline-block;
- width: 64px;
- height: 64px;
+ width: 80px;
+ height: 80px;
 }
 .lds-dual-ring:after {
  content: " ";
  display: block;
- width: 46px;
- height: 46px;
- margin: 1px;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
  border-radius: 50%;
- border: 5px solid #900;
- border-color: #900 transparent #900 transparent;
+ border: 6px solid #fff;
+ border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
 }
 @keyframes lds-dual-ring {

diff --git a/build/ellipsis/main.css b/build/ellipsis/main.css
@@ -1,32 +1,32 @@
 .lds-ellipsis {
  display: inline-block;
  position: relative;
- width: 64px;
- height: 64px;
+ width: 80px;
+ height: 80px;
 }
 .lds-ellipsis div {
  position: absolute;
- top: 27px;
- width: 11px;
- height: 11px;
+ top: 33px;
+ width: 13px;
+ height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .lds-ellipsis div:nth-child(1) {
- left: 6px;
+ left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(2) {
- left: 6px;
+ left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(3) {
- left: 26px;
+ left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(4) {
- left: 45px;
+ left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
 }
 @keyframes lds-ellipsis1 {
@@ -50,6 +50,6 @@
  transform: translate(0, 0);
  }
  100% {
- transform: translate(19px, 0);
+ transform: translate(24px, 0);
  }
 }