a5e v0.0.4

a5e.js

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

english - french

Problem❓

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?

Solution❓

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

OR

yarn add a5e

Download

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

🚀 Start project

import 'a5e';

OR

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

📖 API

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

  <a5e-svg
    animate="true"
    color="#000000"
    size="70"
    type="square"> <!-- type available: heart, line, square, triangle, wall -->
  </a5e-svg>

  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

Supports

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

⭐️ this repository if this project helped you!