Technology3 min read

Lightsaber Style Loader using HTML and SCSS

Abhishek Ahlawat

By Abhishek Ahlawat — Recently

Founder of StudyTonight and a MERN fullstack developer. Writes about JavaScript, web development, Linux, and tech.

Summarize this article using AI

I found a very interesting Codepen code(by Andy Pages) where a developer has developed a loader which can be used on any webpage where we load some resource either from the database or some other source which takes some time and we want to show a good loading image. In such cases generally developers use some .gif images which are often called loader gifs.

Also, post the creation of CSS frameworks like Bootstrap, loaders have been integrated into the CSS and are directly available to be used without adding any image etc.

So here is the code for the amazing Lightsaber style loader.

See the Pen Lightsaber Progress (React, CSS) by Andy Pagès (@andyNroses) on CodePen.


Do share with us the link of your webpage where you use it(if you use it). Also, don't worry if you do not know SCSS, its similar to CSS and if you try you can easily convert the SCSS code to CSS.


SHARE YOUR THOUGHTS WITH US!



Spotted something outdated or wrong?

Liked this? See more StudyTonight posts in Google results.

Add StudyTonight as a preferred source
Next questLIVE OPSStep 2 / 3

Practice real incidents in the browser

System Design Ops — put out fires, ship fixes, and stack XP. Reading done. Time to play.

Play System Design
  • +XP

    Every sim

  • Incidents

    Live ops

  • Ranks

    Climb up

Read next