Rules

1. Please donot copy code from some other site and paste it here.
2. Please do not share sensitive information or Objectional content.
3. Please do not try to brick the styling of the page. In doing so you are degrading the experiance of people actually in need. Keep things fair. If done so, the code submitted will be deleted.
4. Please include the ID specified in the Add code box to the parent div of your code. Until and unless correct ID is added, code will not be submitted
5. If any of the code is found not working or hindering with the other Loaders, it will be removed.
6. If You want to contribute, write a proper working code.
7. You can see the output of the code in the output box.
8. In the styling of your parent div give a height of 300px X 300px or less. By default it is set at 302px X 302px with a solid black border of 1px with a white background, and box-sizing as border-box.
9. If using text inside the loader, give to color to prevent its color change when in dark mode.

Existing Keyframes

You cannot use these names as the name of animation, since they are already existing, please use another name or append a number to the name.

About

This is a site which provide CSS loaders for your porject so you can focus on getting it to work. This site is open to all. Anyone can contribute to site by adding a code. You can also check the source code of the application on github.com.
The site is served by Netlify and the backend api is hosted on Deta and Detabase(Yeh its not a type) is used for Database. The icons have been provided by Icons8. The backend is written in node and express. I am not using any CSS library. Though Jquery is used for javascript and making calls to the server and the editor is ace.js.