I’m working on a Spotify application and need to create a spinning loader animation. I found a loading_indicator.png file in my design resources directory that I want to use. How can I make this static image rotate continuously like those ajax loading spinners you see on websites? I’ve tried a few approaches but can’t get the animation to work smoothly. Should I use CSS animations or is there a better way to handle this in Spotify apps? Any code examples would be really helpful since I’m still learning how to implement these kinds of UI elements properly.
Just went through this exact scenario building a custom loading screen. The key thing that tripped me up was making sure the PNG file itself is properly centered - if your loading_indicator.png has uneven padding or isn’t square, the rotation will look wonky no matter how perfect your CSS is. I had to edit the image first to make it perfectly centered in a square canvas. Also worth adding will-change: transform to optimize rendering performance. One thing that really improved visual quality was setting backface-visibility: hidden which eliminates flickering in certain browsers. The animation’s straightforward once you get the image prep right.
grab any css spinner from codepen and swap their image for your loading_indicator.png. takes about 5 mins. just test it across different browsers - safari gave me weird stutering issues occasionally.
CSS animations are definitely the way to go. I hit the same problem building a music player last year. Use @keyframes with transform: rotate() - it’s smooth and performs well. Set up a keyframe that rotates 0 to 360 degrees, then apply it to your loading_indicator.png with animation: spin 1s linear infinite. Don’t forget transform-origin: center or it’ll rotate around a corner instead of the middle. Linear timing works best for spinners since you want constant speed. CSS transforms are hardware accelerated too, so you’ll get way better performance than JavaScript rotation, especially on mobile.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.