Spicon

Cool feature that makes any element on your Rails application spin on mouseover.

See spicon in action!

Rails 2.3+

Add this line to your application's Gemfile:

gem 'spicon'

And then run:

$ bundle install

Or install it yourself by executing:

$ gem install spicon

Once done, include the below line to application's assets/stylesheets/application.css file

*= require spicon    

Just include the class .spicon to the element you want to apply the spin feature on. For example

%a.fa.fa-twitter.fa-2x.spicon{href: "https://twitter.com/"}

As simple as that!

By using .spicon class by default the element will spin for 2 secs(2000ms), infinitely and in alternate direction. You can also customize these by given values of your own choice

When using customized classes make sure you use it in the following format :

.spicon-spin.duration-{duration of the spin}s.iteration-{number of spins}.{direction of the spin}

for instance,

.spicon-spin.duration-4s.iteration-2.alternate-reverse	

• The first class represents spicon-spin which will just spin the icon

• The second class represents the duration of the spin in seconds. Accordigly you can specify a number of your choice ranging from 1s(fastest) to 10s(slowest)

• The third class represents the number of spins ranging from 1 to 6. You can also use infinite instead of a number for infinite spins.

• The fourth class represents the direction of spin, various options are

  • normal - Spins in clockwise direction
  • reverse - Spins in anti-clockwise direction
  • alternate - Spins in clockwise direction first and then anticlockwise alternately
  • alternate-reverse - Spins in anti-clockwise direction first and then clockwise alternately

1. Fork it
2. Create your feature branch - git checkout -b my-new-feature
3. Commit your changes - git commit -m 'Add some feature'
4. Push to the branch - git push origin my-new-feature
5. Create new Pull Request