About The Resource

I used the amazing 3D transform feature in Framer to make this 3D cube on the design canvas without writing a single line of code.

To rotate each slice, I applied a loop effect to them so they rotate every 1 second. I also tweaked the transition settings to ensure each slice starts rotating one after the other.

To position the loading frame above everything, we can use fixed or absolute positioning with the Z-index set to a high value.

I also used a little trick to make the loader disappear after 2.5 seconds. I set the frame's opacity to 0 on the canvas, then added an appear effect to the frame, where I specified a starting state of 1 opacity and added a 2.5-second delay to the transition.

If you want to learn more about how preloaders work in Framer, make sure to check out my tutorial video where I show you how to make a loading animation from scratch.