diff --git a/.gitignore b/.gitignore index c2658d7..a5199f6 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules/ +.idea \ No newline at end of file diff --git a/css/load10.css b/css/load10.css new file mode 100644 index 0000000..c326347 --- /dev/null +++ b/css/load10.css @@ -0,0 +1,53 @@ +.load10 .loader:before, +.load10 .loader:after { + border-radius: 50%; + width: 1.5em; + height: 1.5em; + background: #fff; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation: load10 4s infinite ease-in-out; + animation: load10 4s infinite ease-in-out; +} +.load10 .loader { + font-size: 10px; + text-indent: -9999em; + margin: 8em 2.5em 0 1em; +} +.load10 .loader:before { + left: 0em; + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} +.load10 .loader:after { + left: 0em; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} +.load10 .loader:before, +.load10 .loader:after { + content: ''; + position: absolute; +} +@-webkit-keyframes load10 { + 0% { + left: 0; + } + 50% { + left: 100%; + } + 100% { + left: 0; + } +} +@keyframes load10 { + 0% { + left: 0; + } + 50% { + left: 100%; + } + 100% { + left: 0; + } +} diff --git a/css/load9.css b/css/load9.css new file mode 100644 index 0000000..741fd4c --- /dev/null +++ b/css/load9.css @@ -0,0 +1,71 @@ +.load9 .loader:before, +.load9 .loader:after, +.load9 .loader { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + background: #fff; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation: load9 2s infinite ease-in-out; + animation: load9 2s infinite ease-in-out; +} +.load9 .loader { + margin: 8em auto; + font-size: 10px; + position: relative; + text-indent: -9999em; +} +.load9 .loader:before { + left: -4em; + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.load9 .loader:after { + left: 0em; + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +.load9 .loader:before, +.load9 .loader:after { + content: ''; + position: absolute; +} +@-webkit-keyframes load9 { + 0% { + left: -4em; + } + 25% { + width: 3em; + height: 3em; + } + 50% { + left: 4em; + } + 75% { + width: 2.5em; + height: 2.5em; + } + 100% { + left: -4em; + } +} +@keyframes load9 { + 0% { + left: -4em; + } + 25% { + width: 3em; + height: 3em; + } + 50% { + left: 4em; + } + 75% { + width: 2.5em; + height: 2.5em; + } + 100% { + left: -4em; + } +} diff --git a/index.html b/index.html index 31edb6b..2c25595 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 diff --git a/jade/index.jade b/jade/index.jade index 8b843fa..564ddb8 100644 --- a/jade/index.jade +++ b/jade/index.jade @@ -1,71 +1,75 @@ - var config = { title: 'Single Element CSS Spinners',description: 'A collection of loading spinners animated with CSS' } doctype html html(lang="en") - head - meta(charset="utf-8") - title=config.title - meta(name="viewport",content="width=device-width") - meta(name="description",content=config.description) - meta(property="og:title",content=config.title) - meta(property="og:type",content="website") - meta(property="og:description",content=config.description) - 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") - link(rel="stylesheet",href="css/main.css") - link(rel="stylesheet",href="http://fonts.googleapis.com/css?family=Lato:300") - - for(var i = 1;i < 9;i++) - link(rel="stylesheet",href="css/load#{i}.css") - body - header - div.inner - h1=config.title - main - div.inner - - for(var i = 1;i < 9;i++) - div(class="load-container load#{i}") - div.loader Loading... - a(href="#load#{i}") < View Source > - - a.github(href="https://github.com/lukehaas/css-loaders",target="_blank"): 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") - div(class="overlay hidden") - //really pissed off Jade can't handle vars in includes - should be able to just loop this: - div(class="source hidden",id="load1") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load1.css - div(class="source hidden",id="load2") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load2.css - div(class="source hidden",id="load3") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load3.css - div(class="source hidden",id="load4") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load4.css - div(class="source hidden",id="load5") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load5.css - div(class="source hidden",id="load6") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load6.css - div(class="source hidden",id="load7") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load7.css - div(class="source hidden",id="load8") - textarea.markup("readonly"):
Loading...
- textarea.css("readonly"): include ../css/load8.css - footer - div.inner - a.twitter(href="http://twitter.com/lukehaas",target="_blank") - img(src="images/me.jpeg",width="45",height="45",alt="Twitter pic") - span Created by @lukehaas - script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js") - script(src="script/main.js") - script. - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-50992962-1', 'lukehaas.me'); - ga('send', 'pageview'); \ No newline at end of file + head + meta(charset="utf-8") + title=config.title + meta(name="viewport",content="width=device-width") + meta(name="description",content=config.description) + meta(property="og:title",content=config.title) + meta(property="og:type",content="website") + meta(property="og:description",content=config.description) + 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") + link(rel="stylesheet",href="css/main.css") + link(rel="stylesheet",href="http://fonts.googleapis.com/css?family=Lato:300") + - for(var i = 1;i < 11;i++) + link(rel="stylesheet",href="css/load#{i}.css") + body + header + div.inner + h1=config.title + main + div.inner + - for(var i = 1;i < 11;i++) + div(class="load-container load#{i}") + div.loader Loading... + a(href="#load#{i}") < View Source > + a.github(href="https://github.com/lukehaas/css-loaders",target="_blank"): 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") + div(class="overlay hidden") + //really pissed off Jade can't handle vars in includes - should be able to just loop this: + div(class="source hidden",id="load1") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load1.css + div(class="source hidden",id="load2") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load2.css + div(class="source hidden",id="load3") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load3.css + div(class="source hidden",id="load4") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load4.css + div(class="source hidden",id="load5") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load5.css + div(class="source hidden",id="load6") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load6.css + div(class="source hidden",id="load7") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load7.css + div(class="source hidden",id="load8") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load8.css + div(class="source hidden",id="load9") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load9.css + div(class="source hidden",id="load10") + textarea.markup("readonly"):
Loading...
+ textarea.css("readonly"): include ../css/load10.css + footer + div.inner + a.twitter(href="http://twitter.com/lukehaas",target="_blank") + img(src="images/me.jpeg",width="45",height="45",alt="Twitter pic") + span Created by @lukehaas + script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js") + script(src="script/main.js") + script. + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-50992962-1', 'lukehaas.me'); + ga('send', 'pageview'); \ No newline at end of file diff --git a/less/load10.less b/less/load10.less new file mode 100644 index 0000000..bceac03 --- /dev/null +++ b/less/load10.less @@ -0,0 +1,38 @@ +.load10 .loader:before,.load10 .loader:after { + border-radius:50%; + width:1.5em; + height:1.5em; + background: #fff; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation:load10 4s infinite ease-in-out; + animation:load10 4s infinite ease-in-out; +} +.load10 .loader { + font-size:10px; + text-indent:-9999em; + margin: 8em 2.5em 0 1em; +} +.load10 .loader:before { + left:0em; + -webkit-animation-delay:0.2s; + animation-delay:0.2s; +} +.load10 .loader:after { + left:0em; + -webkit-animation-delay:0.4s; + animation-delay:0.4s; +} +.load10 .loader:before,.load10 .loader:after { + content:''; + position:absolute; +} + +@-webkit-keyframes load10 {.load10-frames;} +@keyframes load10 {.load10-frames;} + +.load10-frames() { + 0% { left:0; } + 50% { left:100%; } + 100% { left:0; } +} \ No newline at end of file diff --git a/less/load9.less b/less/load9.less new file mode 100644 index 0000000..aa55dd3 --- /dev/null +++ b/less/load9.less @@ -0,0 +1,42 @@ + +.load9 .loader:before,.load9 .loader:after,.load9 .loader { + border-radius:50%; + width:2.5em; + height:2.5em; + background: #fff; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation:load9 2s infinite ease-in-out; + animation:load9 2s infinite ease-in-out; +} +.load9 .loader { + margin:8em auto; + font-size:10px; + position:relative; + text-indent:-9999em; +} +.load9 .loader:before { + left:-4em; + -webkit-animation-delay:-0.5s; + animation-delay:-0.5s; +} +.load9 .loader:after { + left:0em; + -webkit-animation-delay:-1s; + animation-delay:-1s; +} +.load9 .loader:before,.load9 .loader:after { + content:''; + position:absolute; +} + +@-webkit-keyframes load9 {.load9-frames;} +@keyframes load9 {.load9-frames;} + +.load9-frames() { + 0% { left:-4em; } + 25% { width:3em; height:3em; } + 50% { left:4em; } + 75% { width:2.5em; height:2.5em; } + 100% { left:-4em; } +} \ No newline at end of file