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: 10 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 (over 7 years ago)
• Default Branch: main
• Last Pushed: 2025-02-24T20:35:42.000Z (about 2 months ago)
• Last Synced: 2025-03-28T03:24:09.615Z (27 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://svg-loader-doc.proustibat.dev/
• Size: 1010 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 7
• 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.

| [![GitHub package version](https://img.shields.io/github/package-json/v/proustibat/svg-loader-es6.svg)]() 
 [![npm](https://img.shields.io/npm/v/svg-loader-es6.svg)](https://www.npmjs.com/package/svg-loader-es6) 
  [![Npm downloads](https://img.shields.io/npm/dt/svg-loader-es6.svg)](https://www.npmjs.com/package/svg-loader-es6) | [![Maintenance](https://img.shields.io/maintenance/yes/2024.svg)](https://github.com/proustibat/svg-loader-es6/commits/main)  [![GitHub last commit](https://img.shields.io/github/last-commit/proustibat/svg-loader-es6.svg)](https://github.com/proustibat/svg-loader-es6/commits/main) | [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=proustibat_svg-loader-es6&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=proustibat_svg-loader-es6)
[![SonarQube Cloud](https://sonarcloud.io/images/project_badges/sonarcloud-light.svg)](https://sonarcloud.io/summary/new_code?id=proustibat_svg-loader-es6) |

|-|-|-|

---------------------

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

| - | - |