spinners 1.0.3

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    NjAyOTAzODJiNDhlM2EwNjcwNGI2OThhZmRmNmVkYjdlMTExMGIwNQ==
+  data.tar.gz: !binary |-
+    Mjk0ZmMwYzE5NjA4ZjU2ZTlkZmM0ZmQ2YmZmOTEwYjc3MWVlN2Y3ZA==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    Y2YwZDZmYTgyMzEwOWZhYTViZWIxMDdmZGNkNWFjMTM3ODI3YWQzOGVmYzlm
+    MmY0YmIxYTg1MDg1NDQ1ZWRlZWFkZTg4MzE1YmY5Yzk1MGQ3MjExNWNkYTRl
+    ZGVlZTM0OTUzNTk3ZWFhN2JmNDUxYWI5ODhmOTE5ZjdiOTI0YTU=
+  data.tar.gz: !binary |-
+    MGI2MTFjMDQ2NmRlMjJkZTY0YjJjMWU1NGM0ZWNmZDU0YmZmNTEwNjEwNWQ2
+    ZWE2ODg5ZDRkMmE5OTMxN2ExNzM1MGUwNTUxM2I2MjU0MDM4NDZjMzFjNmE4
+    YmE4NjNlM2ZkN2FmNDFlMmE3MzE3YzhjODIwNjE3NTliOTc5MjU=

data/README.md

@@ -0,0 +1,131 @@
+#spinner
+
+[![Bower version](https://badge.fury.io/bo/spinners.svg)](http://badge.fury.io/bo/spinners) [![Gem Version](https://badge.fury.io/rb/spinners.svg)](http://badge.fury.io/rb/spinners)
+
+
+A Sass mixin to generate pure CSS3 loading/busy indicators.
+Uses a single rotating element and a partial border.
+Fully customizable.
+Works with plain Sass or [Compass](http://compass-style.org).
+
+
+##Install
+
+### Download
+To use Spinners straightaway without any package manager, the only file you'll need is `stylesheets/_spinner.scss`. Place this in the appropriate `sass` folder of your project, import it into your main .scss file or -module you deem fit, and you're good to go:
+
+    @import "spinners";
+
+
+### Bower
+To install in your current project using bower run:
+
+    bower install --save-dev spinners
+
+
+### Compass Extension
+
+To install the Compass extension as a Ruby Gem:
+
+    gem install spinners
+    
+and require it in your `config.rb`:
+
+    require 'spinners'
+
+
+Spinners is also on [Sache](http://www.sache.in/).
+
+##Usage
+
+First, import Spinner into your main .scss file or -module:
+
+	@import "spinners";
+
+Then declare a selector of your choice and call the mixin:
+
+	.my-loading-spinner {
+		@include spinner();
+	}
+	
+In your html, you can use any markup element you want, a `div`, `span`, `i`, or what have you.
+
+
+Spinners come set to `display: inline-block` and `vertical-align: middle` by default so you can put it inside buttons, alerts and the like and have it aligned. If this doesn't work for you, declare you overrides ***after*** calling the mixin:
+
+	.my-spinner {
+    	@include spinner();
+        vertical-align: top;
+       	margin-right: .5em;
+    }
+
+### Customizing Spinners
+Size, border-width, -style, -color, and the speed of the animation can be customized. 
+
+
+#### Adjusting Size
+By default, Spinners are set to be `1em` wide and high, so a spinner will size proportionally to its context. To customize its size, you may use any valid dimensional unit such as `px`, `em`, or `rem`:
+
+	.my-spinner {
+		@include spinner(1.25em);
+	}
+
+#### Adjusting border (width, style and thickness)	
+For adjusting the border, you may use any valid shorthand css border declaration or individual `border-{property} {value}` (no colon!) pairs:
+
+	.my-spinner {
+		@include spinner(3px solid #ccc);
+	}
+	
+
+	
+	.my-spinner {
+		@include spinner(border-width 3px, border-style solid);	
+	}
+	
+#### Adjusting animation speed
+To customize a spinner's animation speed, pass the number of seconds for one full rotation:
+
+	.my-spinner {
+		@include spinner(.6s);
+	}
+	
+All arguments are optional. When using mulitple customizations, pass your arguments comma-separated:
+
+	.my-spinner {
+		@include spinner(28px, 3px solid #555, .7s);
+	}
+	
+In case of invalid arguments compilation will not fail, but Spinners will output a warning and use its defaults.
+
+
+
+
+## Compatibility
+Works in any modern browser and IE 10+.
+Spinners does not come with a fallback for IE < 10, so if you need one, roll your own!
+
+
+The MIT License (MIT)
+---
+
+
+Copyright (c) 2014 Franz Heidl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/lib/spinners.rb

@@ -0,0 +1,8 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('Spinners', :path => extension_path)
+
+module Spinners
+  VERSION = "1.0.3"
+  DATE = "2014-05-16"
+end

data/stylesheets/_spinners.scss

@@ -0,0 +1,236 @@
+/*
+================================================================================
+SPINNER
+================================================================================
+A Sass mixin to generate a pure CSS3 loading/busy indicator.
+https://github.com/franzheidl/spinner
+Franz Heidl 2014
+MIT License
+--------------------------------------------------------------------------------
+USAGE
+
+Default:
+
+.my-spinner {
+ @include spinner();
+}
+
+
+Custom:
+
+.my-spinner {
+ @include spinner(1.25em, 3px solid #555, .7s);
+}
+
+All arguments are optional.
+
+Acceppts any valid CSS dimensional declaration, e.g px, em, rem as an argument for size.
+
+Use either shorthand border declarations or individual 'border-[property] [value]' (no colon!) pairs for the style.
+
+Pass any number of seconds referring to the duration of one full rotation for animation speed.
+
+--------------------------------------------------------------------------------
+*/
+
+
+@mixin spinner-keyframes {
+  @-webkit-keyframes spinner-animation {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner-animation {
+    0% {
+      -moz-transform: rotate(0deg);
+    }
+    100% {
+      -moz-transform: rotate(360deg);
+    }
+  }
+  @-ms-keyframes spinner-animation {
+    0% {
+      -ms-transform: rotate(0deg);
+    }
+    100% {
+      -ms-transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner-animation {
+    0% {
+      -o-transform: rotate(0deg);
+    }
+    100% {
+      -o-transform: rotate(100deg);
+    }
+  }
+  @keyframes spinner-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+
+
+@include spinner-keyframes();
+
+
+
+@mixin spinner($args...) {
+  $prefixes: -webkit- -moz- -o- -ms- "";
+  $dimensional-units: ('px', 'em', 'rem', '%', 'ex');
+  $border-props: 'border-width' 'border-style' 'border-color';
+  $border-styles: solid dotted dashed double;
+  $size: 1em;
+  $border-width: 3px;
+  $border-style: solid;
+  $border-color: #4285f4;
+  $border: $border-width $border-style $border-color;
+  $duration: .65s;
+  
+  // Parse arguments:
+  @if $args {
+    @each $arg in $args {
+      @if length($arg) == 1 {
+        @if type-of($arg) == number {
+          @if unit($arg) != "" {
+            @if unit($arg) == 's' {
+              $duration: $arg;
+            }
+            @else if isIn($dimensional-units, unit($arg)) {
+              $size: $arg;
+            }
+            @else {
+              @warn "Spinner: \"#{$arg}\" is not a valid size or duration declaration!";
+            }
+          }
+          @else {
+            @warn "Spinner: \"#{$arg}\" is not a valid size or duration declaration!";
+          }
+        }
+      }
+      @else if length($arg) == 2 {
+        $prop: nth($arg, 1);
+        $val: nth($arg, 2);
+        @if isIn($border-props, $prop) {
+          @if $prop == 'border-width' {
+            @if unit($val) == 'px' {
+              $border-width: $val;
+            }
+            @else {
+              @warn "Spinner: \"#{unit($val)}\" is not a valid border-width! Using default border-width.";
+            }
+          }
+          @else if $prop == 'border-style' {
+            @if isIn($border-styles, $val) {
+              $border-style: $val;
+            }
+            @else {
+              @warn "Spinner: \"#{$val}\" is not a valid border-style! Using default border-style.";
+            }
+          }
+          @else if $prop == 'border-color' {
+            @if type-of($val) == color {
+              $border-color: $val;
+            }
+            @else {
+              @warn "Spinner: \"#{$val}\" is not a valid border-color! Using default border-color.";
+            }
+          }
+        }
+        @else {
+          @warn "Spinner: \"#{nth($arg, 1)}\" is not a valid border property! Using default border.";
+        }
+        $border: $border-width $border-style $border-color;
+      }
+      @else if length($arg) == 3 {
+        @if isValidBorder($arg) {
+          $border: $arg;
+        }
+        @else {
+          @warn "Spinner: \"#{$arg}\" is not a valid shorthand border declaration! Using default border.";
+        }
+      }
+    }
+  }
+  
+  
+  
+  background-color: transparent;
+  border: $border;
+  border-radius: 50%;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  width: $size;
+  height: $size;
+  display: inline-block;
+  vertical-align: middle;
+  @each $prefix in $prefixes {
+    #{$prefix}box-sizing: border-box;
+  }
+  @each $prefix in $prefixes {
+    #{$prefix}animation: spinner-animation $duration infinite linear;
+  }
+}
+
+
+
+@function isValidBorder($border) {
+  $validBorderTypes: color string number;
+  $borderStyles: solid dotted dashed double;
+  $validBorder: false;
+  $types: ();
+  
+  @if length($border) == length($validBorderTypes) {
+    @each $val in $border {
+      @if type-of($val) == number {
+        @if unit($val) == "" {
+          @return false;
+        }
+      }
+      @else if type-of($val) == string {
+        @if not isIn($borderStyles, $val) {
+          @return false;
+        }
+      }
+      $types: append($types, type-of($val));
+    }
+    $validBorder: hasIdenticalValues($validBorderTypes, $types);
+  }
+  
+  @return $validBorder;
+}
+
+
+
+@function hasIdenticalValues($arr1, $arr2) {
+  $id: false;
+  @each $val in $arr1 {
+    @if isIn($arr2, $val) {
+      $id: true;
+    }
+    @else {
+      @return false;
+    }
+  }
+  @return $id;
+}
+
+
+
+@function isIn($arr1, $val) {
+  $hasVal: false;
+  @each $item in $arr1 {
+    @if $item == $val {
+      $hasVal: true;
+    }
+  }
+  @return $hasVal;
+}

data/stylesheets/test.scss

@@ -0,0 +1,82 @@
+@import "spinners";
+
+
+/* Default:
+
+.my-spinner {
+  @include spinner();
+}
+
+*/
+
+.my-spinner {
+  @include spinner();
+}
+
+/*
+Border-width:
+
+.my-fat-spinner {
+  @include spinner(border-width 12px);
+}
+
+*/
+
+.my-fat-spinner {
+  @include spinner(border-width 12px);
+}
+
+/*
+Color:
+
+.my-blue-spinner {
+  @include spinner(border-color blue);
+}
+
+*/
+
+.my-blue-spinner {
+  @include spinner(border-color blue);
+}
+
+
+/*
+Duration/Speed:
+
+.my-fast-spinner {
+  @include spinner(.4s);
+}
+
+*/
+
+.my-fast-spinner {
+  @include spinner(.4s);
+}
+
+/*
+Full config w/ shorthand border declaration:
+
+.my-custom-spinner {
+  @include spinner(23px, 2px dotted #456789, .5s);
+}
+
+*/
+
+.my-custom-spinner-shorthand {
+  @include spinner(23px, 2px dotted #456789, .5s);
+}
+
+/*
+Full config w/ individual border statements:
+
+.my-custom-spinner {
+  @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
+}
+
+*/
+
+.my-custom-spinner {
+  @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
+}
+
+

metadata

@@ -0,0 +1,76 @@
+--- !ruby/object:Gem::Specification
+name: spinners
+version: !ruby/object:Gem::Version
+  version: 1.0.3
+platform: ruby
+authors:
+- Franz Heidl
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-05-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha
+description: A Sass mixin and Compass extension to generate pure CSS3 loading/busy
+  indicators
+email: 
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/spinners.rb
+- stylesheets/_spinners.scss
+- stylesheets/test.scss
+homepage: https://github.com/franzheidl/spinners
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.0.rc.2
+signing_key: 
+specification_version: 4
+summary: Uses a single rotating element and a partial border. Fully customizable.
+test_files: []