How to loop two circle shapes with different durations

Design help Animations & Interactions
1

Hi,
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)?

page-load
page-load242×768 20.5 KB
timed-animation
timed-animation242×768 10.9 KB

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