Miss any of our Open RFC calls?Watch the recordings here! »


0.0.4 • Public • Published
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>

    ##### attributes

    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.

    ##### example

      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!


npm i a5e

DownloadsWeekly Downloads






Unpacked Size

1.55 MB

Total Files


Last publish


  • avatar