diegofelipeceHourglass 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';