I have a habit of getting into the small, irrelevant details when making a demo for a talk. I had an event coming up where I live coded an app. It uses NASA's Asteroids NeoWs -API, and I needed something to display when the data is loading. I ended up creating a loading spinner, which shows an asteroid moving:
In this blog post, I'll share the process of how I created and published the npm-package of the loading indicator. I have only a little experience with SVGs, so this was quite a learning journey both because of the spinner itself and because I've never published an npm-package before.
Initial Design with Figma
Initially, I thought about creating the loading spinner purely in CSS. I even started it with some divs and CSS-styling but soon realized that I don't have the time to learn all the cool tricks.
The next idea was to use an SVG. I opened up Figma and started drawing. I had this idea about what I wanted: A reasonably simple asteroid with some lines indicating that it is moving. I spent some time finetuning the initial design, and when it was ready, I exported it as SVG. This is what it looked like:
After exporting the SVG, I imported it into the project. It was time to start coding (if you call CSS and some fiddling with SVGs coding).
Styling and Animating the Asteroid
When digging deeper into animating SVGs, I found this amazing tutorial from Cassie Evans. There are these two properties in SVGs; stroke-dasharray and stroke-dashoffset. When learning about those, I realized that I don't need to create dashed lines for the asteroid myself - four straight lines with the properties mentioned above will do the trick.
This led to some fiddling with the SVG's code. I am pleased to say that I managed to make the four straight lines instead of the dashed lines you can see from the picture above, and all that with just editing (and deleting) the <path>-elements.
With help from Cassie's tutorial, I also managed to create the animations for lines moving at different paces. It was a traditional trial and error case - I investigated different values until the timing and movement were right.
I also decided that the whole asteroid should move slowly up and down to indicate the movement better. Another thing I'm proud of - I found the right element to use to wrap the contents (g) and gave it a class name to be used for the animations. This might seem small to someone who has more experience with SVGs. However, I am a beginner in the field of SVGs, so this feels like a victory. 🏆
I had a working loading spinner, and it was time to extract it to a separate npm package.
Publishing the Package
For publishing an npm package, I followed this tutorial by Ovie Okeh. It was pretty straightforward to follow, and had there not been this one (self-caused) problem, I would have accomplished my goal in under 30 minutes.
I won't go through the steps for publishing the npm-package; you can check the tutorial for that, but I will talk a bit about the importance of thoroughly reading an email. I mean, everything was working up until the point where I was supposed to actually publish the package. I started getting this mysterious 403-error for no apparent reason.
I honestly spent something like two hours trying to debug this. Finally, I realized I hadn't verified my email, which was the reason for the error. I thought I had clicked the right link, but apparently, I had not.
After the successful verification, everything worked smoothly. To be honest, I am surprised how easy it was in the end. I was waiting for something like slaying an actual dragon, a gatekeeper for the gates of the npm registry.
Published!
So, I got the package published, and I was happy... Until I realized all the things I could have done better. In the first version, I had given class names to the component, and then they were passed to the correct SVG-elements. I realized that what I was trying to accomplish with that approach was to provide the user with the ability to change the loading spinner's colors.
Colors could actually be given as inline properties to SVG-elements, and thus the spinner would need only the color. This way, the user doesn't have to remember to implement the CSS-class behind the class name. This led to some refactoring, and v2 to be out pretty fast after the initial version.
Heh, I also am learning how to work with npm and keep forgetting things. Once I forgot to run the `build' script before publishing, I wondered why nothing changed. I had to make another patch release to actually update the spinner.
If you want to see the code, here's the repository:
eevajonnapanula
/
asteroid-loading-spinner
An asteroid loading spinner React component
And here's a link to the Asteroid Loading Spinner npm-package.
Wrapping Up
It has been interesting to learn more about npm and also SVGs. And animations. I'm also proud that I actually got something out - I have so many projects that just lie there, and I know I will never finish them.
Have you learned something new this year? Please, share if you do! 😊
Resources
- Cassie Evans - Creating My Logo Animation
- Ovie Okeh - The Complete Guide to Publishing a React Package to NPM
- Nasa's API's
- Asteroid Loading Spinner
Cover photo by Chris Henry on Unsplash
Top comments (4)
The spinner looks amazing, great work!
Thank you! 🙏
Hi, cool article! I was curious about publishing a package myself and so I noticed the link to the the npm tutorial links to the NASA API instead. Could you Share the article please? Thanks! 😊
Thank you! And I though I double checked the links but seems like this one slipped through. I updated the link, it should now be correct. Thank you a lot for pointin this out! 😊
And I'll also add the link to this comment as well: blog.logrocket.com/the-complete-gu...