1.2.0 • Published 4 years ago
hourglass-scss v1.2.0
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';