As an additional feature we can add an option to let the arrow tremble a bit when it nears 100 percent. We can achieve this behavior by adding a small animation if an extra
data-trembling
attribute is present:
<div data-gauge data-min="0" data-max="100" data-percent="50" data-orange-from="60" data-red-from="90" data-trembling>
Unfortunately, Compass doesn't provide CSS3 animation mixins out of the box, so we have to install a Compass plugin that can help us with that. In this case, the plugin is called compass-animation (https://github.com/ericam/compass-animation), created by Eric Meyer (http://eric.andmeyer.com/). This is how it's installed:
gem install animation –pre
Or as follows:
sudo gem install animation –-pre
And then we have to include the plugin both when calling compass watch
:
compass watch . –r animation
And in the header of application.scss
:
@import "animation";
Well done! Now we're ready to define a really simple animation that modifies the rotating...