Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/proustibat/svg-loader-es6
SVG Loader Vanilla ES6 - A npm lib to create a customizable SVG loader with Vanilla ES6
https://github.com/proustibat/svg-loader-es6
es6 es6-classes es6-javascript loader npm npm-package svg svg-animated-icons svg-animations svg-loader vanilla-es6 vanilla-javascript vanilla-js
Last synced: 5 days ago
JSON representation
SVG Loader Vanilla ES6 - A npm lib to create a customizable SVG loader with Vanilla ES6
- Host: GitHub
- URL: https://github.com/proustibat/svg-loader-es6
- Owner: proustibat
- License: gpl-3.0
- Created: 2018-01-08T18:21:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-09T19:35:05.000Z (over 4 years ago)
- Last Synced: 2024-10-31T18:29:36.916Z (12 days ago)
- Topics: es6, es6-classes, es6-javascript, loader, npm, npm-package, svg, svg-animated-icons, svg-animations, svg-loader, vanilla-es6, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://proustibat.github.io/svg-loader-es6-example
- Size: 5.52 MB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Loader ES6 
## A class to create customizable SVG loader with Vanilla ES6.
| [](https://www.npmjs.com/package/svg-loader-es6) []() [](https://www.npmjs.com/package/svg-loader-es6) [](https://www.npmjs.com/package/svg-loader-es6) | [](https://travis-ci.org/proustibat/svg-loader-es6) [](https://sonarcloud.io/dashboard?id=.svg-loader-es6) [](https://codeclimate.com/github/proustibat/svg-loader-es6) | [](https://greenkeeper.io/) [](https://david-dm.org/proustibat/stats-text) [](https://david-dm.org/proustibat/stats-text?type=dev) |
| --- | :--- | :---- |
[](https://github.com/proustibat/svg-loader-es6/commits/master) [](https://github.com/proustibat/svg-loader-es6/commits/master) | [](https://codeclimate.com/github/proustibat/svg-loader-es6/issues)
[](https://sonarcloud.io/component_measures?id=prstbt.svg-loader-es6&metric=open_issues) | [](https://sonarcloud.io/component_measures?id=prstbt.svg-loader-es6&metric=complexity)
[](https://sonarcloud.io/component_measures?id=prstbt.svg-loader-es6&metric=cognitive_complexity) | [](https://sonarcloud.io/component_measures?id=prstbt.svg-loader-es6&metric=bugs)
[](https://sonarcloud.io/component_measures?id=prstbt.svg-loader-es6&metric=code_smells) |
| :--- | :--- | :--- | :---- |
---------------------
## Installation
```sh
# Yarn
yarn add --exact svg-loader-es6
# NPM
npm install --save --save-exact svg-loader-es6
```
## Usage
Somewhere in your document:
```html
```
Then in your javascript :
- Import:
```js
import { SVGLoader } from 'svg-loader-es6';
```
- Instantiate:
```js
new SVGLoader( {
containerId: 'your-container-id'
} )
```
## Settings
The constructor can accept more keys in the object as parameters.
Option | Type | Default | Description
------ | ---- | ------- | -----------
containerId | String | "loader-container" | **Required** - The id of the element that will contain the SVG element
svgId | String | "loader" | The id given to the created SVG element
nbRects | int | 3 | Number of rectangle shapes in the SVG
margin | int | 2 | Margin between the shapes (in px)
fill | String (Hex, RGB, RGBA) | "#000000" | Color of the shapes in the SVG
size | int | 15 | Height and width of each shape (rectangle) of the SVG (in px)
radius | int | 2 | Value of the border radius of each rectangle shape of the SVG (in px)
minOpacity | Number | 0.25 | Opacity to give to each shapes at the begin of the animation
maxOpacity | Number | 0.75 | Opacity to give to each shapes at the end of the animation
duration | int | 1000 | Duration of the animation of each shape from minOpacity to maxOpacity (in ms)
## Properties of an instance
Property | Type | Description
-------- | ---- | -----------
settings | Object | The current options of the SVGLoader instance (read-only)
defaultOptions | Object | The default options for settings if there's no settings given to the constructor. This is a static method, so call it as follows: `SVGLoader.defaultProperties`
## Methods
Property | Parameters | Default | Description
-------- | ---------- | ------- | -----------
toggle | - | - | Hide or show the SVG Element
show | - | - | Show the SVG Element
hide | - | - | Hide the SVG Element
destroy | - | - | Remove the SVG element from DOM and delete all properties or listeners
## Demo
### [A complete demo is available here](https://proustibat.github.io/svg-loader-es6-example/)
#### [The source code of the demo is here](https://github.com/proustibat/svg-loader-es6-example)
### [Use the settings generator here](https://proustibat.github.io/svg-loader-es6-example/generator.html)
## Contributing
- Issue Tracker: https://github.com/proustibat/svg-loader-es6/issues
- Source Code: https://github.com/proustibat/svg-loader-es6
- Pull Requests: https://github.com/proustibat/svg-loader-es6/pulls
[The dashboard with CI and code quality indicators](https://proustibat.github.io/svg-loader-es6-example/dashboard.html)