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

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

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

🚀 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!

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