Last active
November 23, 2016 14:44
-
-
Save grapho/c9786b14adc22c1d8579dcf2c60a4275 to your computer and use it in GitHub Desktop.
Spinner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Ember from 'ember'; | |
export default Ember.Controller.extend({ | |
appName: 'Loading Spinner' | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 12px 16px; | |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
font-size: 12pt; | |
} | |
.ring:before { | |
display: block; | |
content: ''; | |
background: transparent; | |
border: 3px solid rgba(0, 0, 0, .4); | |
border-left: 3px solid rgba(0, 0, 0, .8); | |
border-radius: 50%; | |
width: 14px; | |
height: 14px; | |
position: absolute; | |
top: 0; | |
right: 0; | |
animation: spin .8s cubic-bezier(1.0, 0.7, 0.9, 1.0) infinite; | |
z-index: 10; | |
} | |
.ring { | |
background: transparent; | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .8); | |
width: 20px; | |
height: 20px; | |
border-radius: 50%; | |
position: relative; | |
z-index: 0; | |
} | |
.ring:after { | |
display: block; | |
content: ''; | |
background: transparent; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8); | |
width: 16px; | |
height: 16px; | |
border-radius: 50%; | |
top: 2px; | |
right: 2px; | |
position: absolute; | |
z-index: 20; | |
} | |
@keyframes spin { | |
to {transform: rotate(360deg);} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": "0.10.6", | |
"EmberENV": { | |
"FEATURES": {} | |
}, | |
"options": { | |
"use_pods": false, | |
"enable-testing": false | |
}, | |
"dependencies": { | |
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
"ember": "2.9.0", | |
"ember-data": "2.9.0", | |
"ember-template-compiler": "2.9.0", | |
"ember-testing": "2.9.0" | |
}, | |
"addons": {} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment