├── app ├── .gitkeep ├── components │ ├── loading-balls.js │ ├── loading-bars.js │ ├── loading-bubbles.js │ ├── loading-cubes.js │ ├── loading-cylon.js │ ├── loading-spin.js │ ├── loading-spokes.js │ ├── loading-spinning-bubbles.js │ └── loading-component.js └── templates │ └── components │ ├── loading-spin.hbs │ ├── loading-bubbles.hbs │ ├── loading-cylon.hbs │ ├── loading-cubes.hbs │ ├── loading-balls.hbs │ ├── loading-spokes.hbs │ ├── loading-bars.hbs │ └── loading-spinning-bubbles.hbs ├── app-addon └── .gitkeep ├── .gitignore ├── index.js ├── package.json ├── LICENSE └── README.md /app/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app-addon/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /app/components/loading-balls.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-bars.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-bubbles.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-cubes.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-cylon.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-spin.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-spokes.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/components/loading-spinning-bubbles.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './loading-component'; 2 | 3 | export default LoadingComponent.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | name: 'ember-cli-loading', 5 | 6 | included: function included(app) { 7 | this.app = app; 8 | this._super.included(app); 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /app/components/loading-component.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Component.extend({ 4 | size: 250, 5 | color: 'white', 6 | 7 | loadingSvgSize: Ember.computed.alias('size'), 8 | 9 | loadingSvgColor: Ember.computed.alias('color') 10 | }); 11 | -------------------------------------------------------------------------------- /app/templates/components/loading-spin.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-loading", 3 | "version": "0.1.1", 4 | "description": "Ember addon for SVG loading components.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/johnotander/ember-cli-loading/" 12 | }, 13 | "keywords": [ 14 | "ember-addon", 15 | "ember", 16 | "ember-cli", 17 | "loading", 18 | "svg" 19 | ], 20 | "bugs": { 21 | "url": "https://github.com/johnotander/ember-cli-loading/issues" 22 | }, 23 | "homepage": "https://github.com/johnotander/ember-cli-loading", 24 | "author": "John Otander (http://johnotander.com/)", 25 | "license": "MIT" 26 | } 27 | -------------------------------------------------------------------------------- /app/templates/components/loading-bubbles.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014-2015 John Otander 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /app/templates/components/loading-cylon.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/templates/components/loading-cubes.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /app/templates/components/loading-balls.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ember Loading 2 | 3 | An ember [ember-cli](http://ember-cli.com) addon for loading SVG components. This 4 | addon was created to make it simple to add different types of loading indicators 5 | into an app. The SVGs were created entirely by . 6 | 7 | ## Installation 8 | 9 | Install the addon through npm: 10 | 11 | ``` 12 | $ npm install ember-cli-loading 13 | ``` 14 | 15 | ## Usage 16 | 17 | You now have access to the following components: 18 | 19 | ``` 20 | {{loading-balls}} 21 | {{loading-bars}} 22 | {{loading-bubbles}} 23 | {{loading-cubes}} 24 | {{loading-cylon}} 25 | {{loading-spin}} 26 | {{loading-spinning-bubbles}} 27 | {{loading-spokes}} 28 | ``` 29 | 30 | ### Optional color and size values 31 | 32 | You can change the color and size, too. 33 | 34 | ```hbs 35 | {{loading-bars color='green' size=100}} 36 | ``` 37 | 38 | ### Add it to your loading.hbs 39 | 40 | For an application-wide loading indicator, you can call the component from the loading 41 | template: 42 | 43 | `templates/loading.hbs` 44 | ```hbs 45 | {{loading-bubbles color='white' size=100}} 46 | ``` 47 | 48 | ## Acknowledgements 49 | 50 | The SVGs were created by . 51 | 52 | ## License 53 | 54 | MIT 55 | 56 | The License for Brent Jackson's loading SVGs: . 57 | 58 | ## Contributing 59 | 60 | 1. Fork it 61 | 2. Create your feature branch (`git checkout -b my-new-feature`) 62 | 3. Commit your changes (`git commit -am 'Add some feature'`) 63 | 4. Push to the branch (`git push origin my-new-feature`) 64 | 5. Create new Pull Request 65 | 66 | Crafted with <3 by [John Otander](http://johnotander.com). 67 | -------------------------------------------------------------------------------- /app/templates/components/loading-spokes.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /app/templates/components/loading-bars.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app/templates/components/loading-spinning-bubbles.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | --------------------------------------------------------------------------------