-
-
Save acorncom/26704861631663386954376d8f0c533a to your computer and use it in GitHub Desktop.
New Twiddle
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'; | |
| import { task, timeout, asyncComputed, emit } from 'ember-concurrency'; | |
| export default Ember.Controller.extend({ | |
| value: 23, | |
| tweened: asyncComputed('value', function * (v) { | |
| let targetValue = parseInt(v) || 0; | |
| if (targetValue > 100) { | |
| targetValue = 100; | |
| } | |
| let curValue = parseInt(this.get('tweened.lastComplete.value') || targetValue); | |
| while (true) { | |
| let delta = Math.floor((targetValue - curValue) * 0.6); | |
| if (delta) { | |
| curValue += delta; | |
| yield emit(curValue); | |
| } else { | |
| return targetValue; | |
| } | |
| yield timeout(50); | |
| } | |
| }), | |
| }); |
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'; | |
| const { Helper } = Ember; | |
| export function div(params) { | |
| return params.reduce((a, b) => a / b); | |
| } | |
| export default Helper.helper(div); |
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'; | |
| const { Helper } = Ember; | |
| export function mult(params) { | |
| return params.reduce((a, b) => a * b); | |
| } | |
| export default Helper.helper(mult); |
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
| /* Load animation */ | |
| @-webkit-keyframes | |
| load { 0% { | |
| stroke-dashoffset:0 | |
| } | |
| } | |
| @-moz-keyframes | |
| load { 0% { | |
| stroke-dashoffset:0 | |
| } | |
| } | |
| @keyframes | |
| load { 0% { | |
| stroke-dashoffset:0 | |
| } | |
| } | |
| /* Container */ | |
| .progress { | |
| position: relative; | |
| display: inline-block; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| /* Item */ | |
| .progress>li { | |
| display: inline-block; | |
| position: relative; | |
| text-align: center; | |
| color: #93A2AC; | |
| font-family: Lato; | |
| font-weight: 100; | |
| margin: 2rem; | |
| } | |
| .progress>li:before { | |
| content: attr(data-name); | |
| position: absolute; | |
| width: 100%; | |
| bottom: -2rem; | |
| font-weight: 400; | |
| } | |
| .progress>li:after { | |
| content: attr(data-percent); | |
| position: absolute; | |
| width: 100%; | |
| top: 3.7rem; | |
| left: 0; | |
| font-size: 2rem; | |
| text-align: center; | |
| } | |
| .progress svg { | |
| width: 10rem; | |
| height: 10rem; | |
| } | |
| .progress svg:nth-child(2) { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| } | |
| .progress svg:nth-child(2) path { | |
| fill: none; | |
| stroke-width: 25; | |
| stroke-dasharray: 629; | |
| stroke: rgba(255, 255, 255, 0.9); | |
| -webkit-animation: load 3s; | |
| -moz-animation: load 3s; | |
| -o-animation: load 3s; | |
| animation: load 3s; | |
| } |
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.1", | |
| "EmberENV": { | |
| "FEATURES": {} | |
| }, | |
| "options": { | |
| "use_pods": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
| "ember": "2.6.0", | |
| "ember-data": "2.6.1", | |
| "ember-template-compiler": "2.6.0" | |
| }, | |
| "addons": { | |
| "ember-concurrency": "tof3" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment