Streaming live at 10am (PST)

How to loop two circle shapes with different durations

I have two circle shapes that I wanted to rotate 360degree and loop them when page loads (see the attachment).
One has the duration of 10sec and other has 15sec.
What’s the best way to do this?
Do I need to create multiple ‘page load’ interactions? Is there a way to create the animation in a single ‘timed animation’(See the attachment)?

Here is my public share link: LINK
(how to access public share link)