Open CSS Loader

#webdev #css

Introduction

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.

About

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.

Problems

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.