# svg-loader-es6 > SVG Loader Vanilla ES6 Latest version **1.1.5** (published 2024-11-26) · GPL-3.0 license · 0 weekly downloads ## Install ```sh npm install svg-loader-es6 pnpm add svg-loader-es6 yarn add svg-loader-es6 bun add svg-loader-es6 ``` ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.5 | | Published | 2024-11-26 | | First published | 2018-01-10 | | Weekly downloads | 0 | | License | GPL-3.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 50.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Proustibat | | Maintainers | proustibat | | Keywords | svg, loader, es6, vanilla, js, vanilla js, vanilla es6, svg animation | ## Links - npm: https://www.npmjs.com/package/svg-loader-es6 - Repository: https://github.com/proustibat/svg-loader-es6 - Homepage: https://github.com/proustibat/svg-loader-es6#readme - Issues: https://github.com/proustibat/svg-loader-es6/issues - npm.io page: https://npm.io/package/svg-loader-es6 ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 1.1.5 (latest) — 2024-11-26 - 1.1.1 — 2018-01-21 - 1.1.0 — 2018-01-15 - 1.0.5 — 2018-01-12 - 1.0.4 — 2018-01-12 - 1.0.2 — 2018-01-12 - 1.0.1 — 2018-01-12 - 1.0.0 — 2018-01-12 - 0.0.3 — 2018-01-11 - 0.0.1 — 2018-01-10 ## README # SVG Loader ES6 GitHub license ## 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) | |-|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| --------------------- ## 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/) Live Demo Examples #### [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) Settings generator gif ## 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 | JavaScript Style Guide | | - | - | --- _Source: https://npm.io/package/svg-loader-es6 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._