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 >
<div class="loader">Loading...</div>
.load1 .loader, +<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Single Element CSS Spinners</title><meta name="viewport" content="width=device-width"><meta name="description" content="A collection of loading spinners animated with CSS"><meta property="og:title" content="Single Element CSS Spinners"><meta property="og:type" content="website"><meta property="og:description" content="A collection of loading spinners animated with CSS"><meta property="og:image" content="http://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg"><meta property="og:url" content="http://projects.lukehaas.me/css-loaders/"><script src="script/modernizr-2.8.2.js"></script><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300"><link rel="stylesheet" href="css/load1.css"><link rel="stylesheet" href="css/load2.css"><link rel="stylesheet" href="css/load3.css"><link rel="stylesheet" href="css/load4.css"><link rel="stylesheet" href="css/load5.css"><link rel="stylesheet" href="css/load6.css"><link rel="stylesheet" href="css/load7.css"><link rel="stylesheet" href="css/load8.css"><link rel="stylesheet" href="css/load9.css"><link rel="stylesheet" href="css/load10.css"></head><body><header><div class="inner"><h1>Single Element CSS Spinners</h1></div></header><main><div class="inner"><div class="load-container load1"><div class="loader">Loading...</div><a href="#load1">< View Source ></a></div><div class="load-container load2"><div class="loader">Loading...</div><a href="#load2">< View Source ></a></div><div class="load-container load3"><div class="loader">Loading...</div><a href="#load3">< View Source ></a></div><div class="load-container load4"><div class="loader">Loading...</div><a href="#load4">< View Source ></a></div><div class="load-container load5"><div class="loader">Loading...</div><a href="#load5">< View Source ></a></div><div class="load-container load6"><div class="loader">Loading...</div><a href="#load6">< View Source ></a></div><div class="load-container load7"><div class="loader">Loading...</div><a href="#load7">< View Source ></a></div><div class="load-container load8"><div class="loader">Loading...</div><a href="#load8">< View Source ></a></div></div><a href="https://github.com/lukehaas/css-loaders" target="_blank" class="github"><img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="overlay hidden"></div><!--really pissed off Jade can't handle vars in includes - should be able to just loop this:--><div id="load1" class="source hidden"><textarea readonly class="markup"><div class="loader">Loading...</div>
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #FFF; @@ -116,7 +116,10 @@ transform: rotate(360deg); } } -
<div class="loader">Loading...</div>
.load3 .loader { +
+
+
<div class="loader">Loading...</div>
+
.load3 .loader { font-size: 10px; margin: 5em auto; text-indent: -9999em; @@ -359,9 +362,9 @@ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); - box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff; } } + box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
<div class="loader">Loading...</div>
.load7 .loader:before, .load7 .loader:after, .load7 .loader { @@ -453,10 +456,11 @@ transform: rotate(360deg); } } -
\ No newline at end of file +ga('send', 'pageview');
+
+
+