How and why I built Flash-loader

About me

Hi, I am Pulkit .A full stack developer and blockchain enthusiast I look to make things smoother through tech.

The problem I wanted to solve

Well I had learn't a bit of sprite-sheet animation while I was learning to make games with pygame.So I thought why not use this method to create an animated loader to replace the traditional ones .

What is Flash-loader?

⚡️ Flash-Loader (https://github.com/kpulkit29/Flash-Loader) is a fun sprite-sheet animation based react component library which can be used in place of the traditional leaders.The library is inspired by the DC comics character the flash and has some cool loading modes to try.It is a react component library which uses the spritesheet to build animations.At the same time it is pretty simple to use and include in your existing project.Go check it out here (https://github.com/kpulkit29/Flash-Loader) and give it a star if you like it

Tech stack

Tech Stack -:
React
HTML
CSS animations

The process of building Flash-loader

Challenges I faced

While making a component the first question that comes to your mind how will my code become generic so that everyone could use it,Well after reading some articles I can definetely say that is a easiest part.The only hard part here is to come up with an idea worthwhile.

Key learnings

Using CSS to traverse thorugh the spritesheet```

.rotate {
width: 118.6px !important;
height: 111px !important;
background : url("../assets/lightining.png") left center;
animation: move3X 0.3s steps(3) infinite;
display: block;
margin: 0 auto;
}

@keyframes move3X{
100% {background-position:-356px;}
}

## Tips and advice


## Final thoughts and next steps

********