Hourglass SCSS

Hourglass is a bunch of CSS loaders I've been doing with SASS, based on the concept of heaving a single HTML only, with some simple class options, like:

<span class="hourglass --square-spin"></span>

With some animations options based on the class added:

name	class	used colors
Circle Border	--circle-border	$hourglassColor1
Circle Colors	--circle-colors	$hourglassColor1, $hourglassColor2, $hourglassColor3
Circle Dots	--circle-dots	$hourglassColor1, $hourglassColor2, $hourglassColor3
Circle Spin	--circle-spin	$hourglassColor2, $hourglassColor3
Square Spin	--square-spin	$hourglassColor1, $hourglassColor5, $hourglassColor3
Square Turning	--square-turning	$hourglassColor1, $hourglassColor3

Getting started

Add it to the project npm install hourglass-scss --save or yarn add hourglass-scss and import it globally.

If you preffer, you can customize the colors by replacing the desired color variable before importing hourglass.

color	code
$hourglassColor1	rgba(139, 30, 63, 1)
$hourglassColor2	rgba(60, 21, 59, 1)
$hourglassColor3	rgba(206, 121, 107, 1)
$hourglassColor4	rgba(50, 41, 47, 1)
$hourglassColor5	rgba(236, 200, 175, 1)
$black	#000
$white	#fff

Example

$hourglassColor1: red;
$hourglassColor2: green;
$hourglassColor3: blue;
$hourglassColor4: maroon;
$hourglassColor5: cian;

@import 'scss/hourglass';