Add classes to allow for changing the size and margin of the spinners

[jacobsvante]

Examples:

<!-- Extra small (10px) -->
<div class="sk sk-rotating-plane sk-xs"></div>

<!-- Small (20px) -->
<div class="sk sk-rotating-plane sk-sm"></div>

<!-- Medium (same as old default size, 40px) -->
<div class="sk sk-rotating-plane sk-md"></div>

<!-- Large (60px) -->
<div class="sk sk-rotating-plane sk-lg"></div>

<!-- Extra large (100px) -->
<div class="sk sk-rotating-plane sk-xl"></div>

<!-- Same margins as before this PR -->
<div class="sk sk-rotating-plane sk-auto-hmargin sk-md-vmargin"></div>

There are some breaking changes that allow us to decrease code duplication:

• The class “sk” has to be added to each spinner
• No margin is added to the spinner by default. The classes sk-auto-hmargin and sk-md-vmargin can be added to revert to the margins used before this PR.
• Renamed sk-spinner-pulse to sk-pulse to follow naming convention.
• Default to display: inline-block and vertical-align: middle for a more useful default

All spinners work great to resize except for 4-wandering-cubes. This is because an absolute size is declared in its keyframe. It would be awesome if anyone could help me come up with a solution to this issue 😀

[sb-lc]

how do I change the opacity? its not very bright at all, so far I have tried adding th !important to the css but no luck, its not overriding

@-webkit-keyframes sk-circleFadeDelay { 0%, 70%, 100% { opacity: 0; } 40% { opacity: 1; } }

@keyframes sk-circleFadeDelay { 0%, 70%, 100% { opacity: 0; } 71% { opacity: 1; } }

to ....

@-webkit-keyframes sk-circleFadeDelay { 0%, 70%, 100% { opacity: 0 !important; } 40% { opacity: 1 !important; } }

@keyframes sk-circleFadeDelay { 0%, 70%, 100% { opacity: 0 !important; } 71% { opacity: 1 !important; } }

[tobiasahlin]

Obsolete as of #143