diff --git a/README.md b/README.md index bddc6f9..984a6b5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,19 @@ # Loading... This could take a while -http://jxnblk.github.io/loading +http://jxnblk.com/loading + +## Getting Started + +```bash +npm install loading-svg +``` + +*Or* + +```bash +bower install loading +``` ## Usage diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..d1a621a --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "loading", + "version": "0.0.0", + "homepage": "https://github.com/jxnblk/loading", + "main": [ + "./loading-balls.svg", + "./loading-bars.svg", + "./loading-bubbles.svg", + "./loading-cubes.svg", + "./loading-cylon.svg", + "./loading-spin.svg", + "./loading-spinning-bubbles.svg", + "./loading-spokes.svg" + ], + "keywords": [ + "loading", + "ajax", + "svg" + ], + "license": "MIT" +} diff --git a/index.html b/index.html index e3f6822..7f04208 100644 --- a/index.html +++ b/index.html @@ -7,67 +7,143 @@ + -
-
+
+

Loading...

This could take a while

- View on Github - - - - - Tweet - +
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
-
-
+
+

still loading...

-
-
+
+

seriously?

-
-
+
+

wtf

-
-
- +
+
+

frak me

-
-
+
+

i give up

- View on Github - - - - - Tweet - -

Made with love by - Jxnblk -

+
+
+
+ +
+
+ +
+
+
+ GitHub + Made by Jxnblk
+ + + + + + diff --git a/loading-cylon-red.svg b/loading-cylon-red.svg new file mode 100644 index 0000000..67140a4 --- /dev/null +++ b/loading-cylon-red.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/loading-spokes.svg b/loading-spokes.svg index d950104..bc07038 100644 --- a/loading-spokes.svg +++ b/loading-spokes.svg @@ -15,7 +15,7 @@ - + diff --git a/package.json b/package.json new file mode 100644 index 0000000..2b3ea6f --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "loading-svg", + "version": "1.0.0", + "description": "Animated SVG loading indicators", + "repository": { + "type": "git", + "url": "git+https://github.com/jxnblk/loading.git" + }, + "keywords": [ + "svg", + "loading", + "ajax", + "ui" + ], + "author": "Brent Jackson", + "license": "MIT", + "bugs": { + "url": "https://github.com/jxnblk/loading/issues" + }, + "homepage": "https://github.com/jxnblk/loading#readme" +} diff --git a/site/_theme.scss b/site/_theme.scss index 74c3521..0593c16 100644 --- a/site/_theme.scss +++ b/site/_theme.scss @@ -5,15 +5,30 @@ $blue: #3ad; $light-gray: #f9fcff; $mid-gray: #a9acac; $dark-gray: #30393f; +$dark-gray: #292c2f; -//$red: #f43; +$mid-gray: #afb99f; + +$cream: #dfe9cf; $red: #f54; -$purple: #f49; -$slate: #769; +$purple: #aa4f80; +$blue: #40bfc0; +$green: #50cf77; +$orange: #efaf50; +$dark: #202c2f; + .bg-red { background-color: $red; } .bg-purple { background-color: $purple; } -.bg-slate { background-color: $slate; } +.bg-blue { background-color: $blue; } +.bg-green { background-color: $green; } +.bg-orange { background-color: $orange; } +.bg-dark { background-color: $dark; } +.bg-cream { background-color: $cream; } + +.dark { color: $dark; } + +.cream { color: $cream; } .white { color: #fff; } .blue { color: $blue; } @@ -24,7 +39,6 @@ $slate: #769; .red { color: $red; } .bg-white { background-color: #fff; } -.bg-blue { background-color: $blue; } .bg-light-gray { background-color: $light-gray; } .bg-mid-gray { background-color: $mid-gray; } .bg-dark-gray { background-color: $dark-gray; } diff --git a/site/style.css b/site/style.css index 5d878eb..e578580 100644 --- a/site/style.css +++ b/site/style.css @@ -1 +1 @@ -body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#f49}.bg-slate{background-color:#769}.white{color:#fff}.blue{color:#3ad}.light-gray{color:#f9fcff}.mid-gray{color:#a9acac}.dark-gray{color:#30393f}.red{color:#f54}.bg-white{background-color:#fff}.bg-blue{background-color:#3ad}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#a9acac}.bg-dark-gray{background-color:#30393f}.fill-white{fill:#fff}.fill-blue{fill:#3ad}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#a9acac}.fill-dark-gray{fill:#30393f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#a9acac}.stroke-light-gray{stroke:#f9fcff}body{color:#30393f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#3ad;fill:#3ad;box-shadow:inset 0 0 0 2px #3ad}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#3ad}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em} +body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#aa4f80}.bg-blue{background-color:#40bfc0}.bg-green{background-color:#50cf77}.bg-orange{background-color:#efaf50}.bg-dark{background-color:#202c2f}.bg-cream{background-color:#dfe9cf}.dark{color:#202c2f}.cream{color:#dfe9cf}.white{color:#fff}.blue{color:#40bfc0}.light-gray{color:#f9fcff}.mid-gray{color:#afb99f}.dark-gray{color:#292c2f}.red{color:#f54}.bg-white{background-color:#fff}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#afb99f}.bg-dark-gray{background-color:#292c2f}.fill-white{fill:#fff}.fill-blue{fill:#40bfc0}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#afb99f}.fill-dark-gray{fill:#292c2f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#afb99f}.stroke-light-gray{stroke:#f9fcff}body{color:#292c2f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#40bfc0;fill:#40bfc0;box-shadow:inset 0 0 0 2px #40bfc0}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#40bfc0}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em}