Skip to content

Instantly share code, notes, and snippets.

@noahmatisoff

noahmatisoff/loading-spinner.js

Forked from wycats/loading-spinner.js
Last active August 29, 2015 14:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save noahmatisoff/96ce8ee532370c66a92d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save noahmatisoff/96ce8ee532370c66a92d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @wycats wycats created this gist Oct 28, 2014.
    53 changes: 53 additions & 0 deletions loading-spinner.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    /*global Spinner*/

    import Ember from 'ember';

    export default Ember.Component.extend({
    classNames: ['dw-spin-view'],

    size: 'large',

    sizes: {
    large: {
    lines: 11,
    length: 6,
    width: 3,
    radius: 7
    },

    small: {
    lines: 10,
    length: 4,
    width: 2,
    radius: 3.5
    }
    },

    didInsertElement: function() {
    var opts = {
    lines: 11, // The number of lines to draw
    length: 6, // The length of each line
    width: 3, // The line thickness
    radius: 7, // The radius of the inner circle
    corners: 1, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#000', // #rgb or #rrggbb
    speed: 0.8, // Rounds per second
    trail: 61, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: true, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 1000, // The z-index
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
    };

    var sizeOpts = this.sizes[this.get('size')];

    Ember.merge(opts, sizeOpts);

    // FIXME: Should this be destroyed?
    new Spinner(opts).spin(this.$()[0]);
    }
    });
    8 changes: 8 additions & 0 deletions spinner.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    .content-container {
    position: relative;

    .dw-spin-view {
    margin: 32px auto;
    height: 32px;
    }
    }