PCPP Loading Boxes

The new PCPartPicker website is coming very soon and I'm finishing up the final details for launch. We needed a loading animation for pages which display parts, completed builds, build guides, etc. I wanted to use the golden "part" from the new PCPP Mark and animate it in a way which illustrated "parts/items of the site are being accessed". After a couple initial concepts we came up with this one.

It's styled and animated purely with CSS and SVG. We forked Brandon Mathis' original pen as our starting point and adjusted the animation behavior, timing, colors, added a shadow, etc to make it our own and on brand.

We also put this up on CodePen. Check it out there to see the latest version as we tweak it before launch.