DEV Community

Cover image for Open CSS Loader
Tushar Agrawal
Tushar Agrawal

Posted on • Updated on

Open CSS Loader

Site link:-


So this is my first post so don't expect much. So a little backstory here. While searching for a pure CSS loader for my college project, I stumbled across a few sites which did get my work done, but every site was maintained by only a few individuals. Also, some sites haven't been updated for a long time. So here I present to you an open CSS loader that allows everyone to contribute to the site. Thus, hopefully, it is updated.


So I decided to work on one and host it on DETA since it is free and is new so I decided to give it a try.
I aim this site at someone who is searching for a loader and can find a variety of loaders. He can take any of the code directly or can edit them on the site and see the output above the code.

The main feature though is adding the code. It is simple. Make a parent div and give the specific id specified and you can submit the code. So a beginner or even an experienced developer can submit a code. A point to be remembered is that if the code submitted hinders the working of other loaders or does not work at all, it will be deleted. Else you are free to use any code from the site without any acknowledgment. Also, the complete backend of the site will be available on GitHub once I complete it.


The first is people targeting other loaders or other components of the page by mistake. I did use regex to check if only the id specified is used and not anything else to prevent style altering of other loaders, but I have to do something about the common div elements.
The second is I am using prism.js for syntax highlighting which I think is not good since it has to style the complete text box when there is a change in the textbox.
Edit I found that there is a library called ace.js which provides an online IDE. I will be switching to it.

Top comments (3)

atakanatici profile image
Atakan ATICI • Edited
tusharyaar profile image
Tushar Agrawal

Thank you
This message is given if you enter any other Id rather than the shown one
This is to prevent direct altering any other style

atakanatici profile image
Atakan ATICI

Ok. Thank You for your answer :)