# hourglass-scss

> A bunch of loaders made with CSS animations.

Latest version **1.2.0** (published 2020-04-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install hourglass-scss
pnpm add hourglass-scss
yarn add hourglass-scss
bun add hourglass-scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-04-09 |
| First published | 2020-04-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Diego Esteves |
| Maintainers | diegofelipece |

## Links

- npm: https://www.npmjs.com/package/hourglass-scss
- Repository: https://diegofelipece@github.com/diegofelipece/hourglass-scss
- Homepage: https://github.com/diegofelipece/hourglass-scss#readme
- Issues: https://github.com/diegofelipece/hourglass-scss/issues
- npm.io page: https://npm.io/package/hourglass-scss

## Recent versions

- 1.2.0 (latest) — 2020-04-09
- 1.0.1 — 2020-04-09

## README

# 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:

``` html
<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

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

@import 'scss/hourglass';
```

---
_Source: https://npm.io/package/hourglass-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._