From 8732b8c909f6d6e7cd331c4f9d6d378497ea75d5 Mon Sep 17 00:00:00 2001 From: spiritinlife Date: Tue, 3 Jun 2014 15:52:07 +0300 Subject: [PATCH] Add 2 new loaders rotate and exploding --- css/load10.css | 48 +++++++++++++++++++++++++++++++++ css/load9.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 14 ++++++---- 3 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 css/load10.css create mode 100644 css/load9.css diff --git a/css/load10.css b/css/load10.css new file mode 100644 index 0000000..ea275ec --- /dev/null +++ b/css/load10.css @@ -0,0 +1,48 @@ +/* + Author: spiritinlife + Name : George Chailazopoulos + Date : 3/6/2014 +*/ +.load10 .loader { + margin: 8em auto; + font-size: 10px; + position: relative; + text-indent: -9999em; + border: 1.1em solid #ffffff; + -webkit-animation: load10 1.1s infinite linear; + animation: load10 1.1s infinite linear; +} +.load10 .loader, +.load10 .loader:after { + border-radius: 50%; + width: 4em; + height: 6em; +} +@-webkit-keyframes load10 { + 0% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + } + 50% { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + } + 100% { + -webkit-transform: rotateY(360deg); + transform: rotateY(360deg); + } +} +@keyframes load10 { + 0% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + } + 50% { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + } + 100% { + -webkit-transform: rotateY(360deg); + transform: rotateY(360deg); + } +} diff --git a/css/load9.css b/css/load9.css new file mode 100644 index 0000000..cc6b79b --- /dev/null +++ b/css/load9.css @@ -0,0 +1,72 @@ +/* + Author: spiritinlife + Name : George Chailazopoulos + Date : 3/6/2014 +*/ +.load9 .loader { + margin: 6em auto; + font-size: 10px; + position: relative; + text-indent: -9999em; + border: 0.5em solid #ffffff; + -webkit-animation: load9 1.1s infinite linear; + animation: load9 1.1s infinite linear; +} +.load9 .loader, +.load9 .loader:after { + border-radius: 50%; + width: 3em; + height: 3em; +} +@-webkit-keyframes load9 { + 0% { + -webkit-transform: scale(0.3,0.3); + transform: scale(0.3,0.3); + } + 20% { + -webkit-transform: scale(0.6,0.6); + transform: scale(0.6,0.6); + } + 40% { + -webkit-transform: scale(1,1); + transform: scale(1,1); + } + 60% { + -webkit-transform: scale(1.4,1.4); + transform: scale(1.4,1.4); + } + 80% { + -webkit-transform: scale(1.8,1.8); + transform: scale(1.8,1.8); + } + 100% { + -webkit-transform: scale(0.3,0.3); + transform: scale(0.3,0.3); + } +} +@keyframes load9 { + 0% { + -webkit-transform: scale(0.3,0.3); + transform: scale(0.3,0.3); + } + 20% { + -webkit-transform: scale(0.6,0.6); + transform: scale(0.6,0.6); + } + 40% { + -webkit-transform: scale(1,1); + transform: scale(1,1); + } + 60% { + -webkit-transform: scale(1.4,1.4); + transform: scale(1.4,1.4); + } + 80% { + -webkit-transform: scale(1.8,1.8); + transform: scale(1.8,1.8); + } + 100% { + -webkit-transform: scale(0.3,0.3); + transform: scale(0.3,0.3); + } +} diff --git a/index.html b/index.html index 31edb6b..7943d46 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -Single Element CSS Spinners

Single Element CSS Spinners

Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Loading...
< View Source >
Fork me on GitHub +
\ No newline at end of file +ga('send', 'pageview');