Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including a5e with all npm packages installed. Try it out:

var a5e = require("a5e")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

a5e v0.0.4

javascript micro-library based on web components and svg to create animated and dynamic graphic loaders

a5e logo standard

a5e.js NPM Package Build Size NPM Downloads Dev Dependencies

javascript micro-library based on web components and svg to create animated and dynamic graphic loaders

english - french


many ui libraries often provide a similar design. there is a demand for that and it is normal. more some of these libraries prefer to use gifs. which bothers me when it is a simple loader. there is a way to implement something more elegant. i did not want to follow their example but what would have been my approach, a generator of loaders svg?


that's when the svg comes into play. often forgotten, the svg remains very powerful and can allow us to do cool things when we want to push the performance of browsers a little. svg is nothing but xml, so it is 100% compatible with dom html. ok let's go on it! let's add on top of that the use of a shadow dom as well as css animations in the idea of cococting a hybrid project. a sort of small DBZ-style merger!

⚠️ Disclaimer

i'm not a developer, i'm just a dreamer who appreciates programming and wants to know more about web components while having fun. so, this famous shadow dom i will use it to create the following tag <a5e-svg></a5e-svg> which will be interpreted by the browser like any other html tag. thank you the custom elements! i also made the choice to delegate the animation of the svg to the css. at the outset, my choice was oriented towards the tag <animate> but unfortunately for me. i did not manage to animate a svg on firefox when an object is added in the dom dynamically.

📦 Install dependencies

Command line

npm i a5e


yarn add a5e


you can also download this repo, to recover the file dist/a5e.js and finally add it to your project in a place provided for this purpose.

💻 Demo

a5e heart sample a5e line sample
a5e square sample a5e triangle sample

🚀 Start project

import 'a5e';


<script src="./a5e.js"></script>


  • <a5e-svg></a5e-svg>


    animate { String }: true / false, if animation is enabled.
    color { String }: the desired color, this can be all the colors interpreted by the browsers.
    size { String }: the size of the screen.
    type { String }: the name of the desired svg.

      type="square"> <!-- type available: heart, line, square, triangle, wall -->

    voilà! is done.

📝 Todo

  • [ ] test cases
  • [ ] reduce the bundle size
  • [ ] dynamic animate attribute
  • [ ] dynamic color attribute

©️ License

Copyright ©️ 2019 monsieurbadia

Released under the MIT license


logo by @mllemartins with 🖤
built by @monsieurbadia with 🖤

⭐️ this repository if this project helped you!

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free