New Javascript (AnimeJS) spinners for website (examples & source code)
Tags: javascript, animation, website, animejs
Published: 2021-06-21 03:13:41

## Hello everyone

My name is **Devang Saklani** and I am a freelance **Front-end Web developer** from INDIA. I like creating things like websites, animations and writing blogs (however this is my first blog let's see how it goes😅). 

I have been learning JS from few months and in first sight i loved it it's syntax, power and it's  uses. Then I got into touch with JS libraries for extra functionality like ReactJS and then I came across **AnimeJS**. I was amazed at first by it's syntax and it's power, it's a amazing animation library through which you can do simple as well as super complex animations.

## Don't know Anime JS? here's a quick intro!


![AnimeJS logo](https://i.pinimg.com/564x/61/4d/c4/614dc4940d8d2e4a517b1045615eaec3.jpg)
### What is AnimeJS?
 - **[Anime.js](https://animejs.com/)** is a small, lightweight JavaScript library with a simple and small powerful API.
 - It works with the DOM element, CSS, and JavaScript object.
 - and the final thing is It's really **Underrated**.


### How to use AnimeJS?

 - First of all Install it. The installation steps are quite simple as we can use either a CDN network to use it or can directly install it through NPM. See official installation details [here](https://github.com/juliangarnier/anime#getting-started).

### Basic usage:

 - I would 
recommend you to go to the [official documentation](https://animejs.com/documentation/) for instructions because it is Super **simple** and Super **interactive**.


## Now what I  made using it:

I have made Some loading spinners using AnimeJS. These are some images/gifs:



This one is a really viral animation called B&W loading animation 9 by Lilian Tedone:⏬
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de87afx0qy4gddl3gzcc.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wsouijbxufa8cdad7kp.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1a04f1tqdjfrgrflsxf.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/084hcoojnj0xknedabql.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paop6iy9h90ld394dw86.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5fk1ah0x99doff3cfh6.gif)
![animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbgtlu3zbig8iddec70u.gif)


Check out these **animations live** at [this website](https://devang47.github.io/Animated-Spinners/).

## Features (highlights):

 - Easy to use (simply copy & paste).
 - Source code is already **minified**.
 - **Awesome animations**.
 - 2 **themes** till now (stroked and filled) and a theme switch button.
 - A **automation theme save** feature which saves your theme **even after page reload**.
 - A **Slider** for better UX and **keyboard compatible** (use arrow keys to navigate).

## Known issues

I know these animations are sick but this seriously needs some *improvement* and *optimizations*.. That's why I need your help in solving these bugs* and make some performance improvements.




### Known bugs:
 - Sometimes the code source viewer does'nt shows anything.
 - The CPU also gets 100% used when using a old computer and causing **frame drops** 😥.
 - and Many other small bugs that haven't discovered yet.


This is the [Github URL](https://github.com/Devang47/Animated-Spinners/) of this repo. You can help me by contributing here also If you want to contact me this is my email (devangsaklani@gmail.com) I'll surely reply you. 

Thanks for reading and I would love to read your thoughts on this in comment section😁.