Lets say that on a page there are multiple custom components. Some of them bear a parent-child relationship, while some are placed directly on the page. So how should I use the spinner component? Do I need to have the markup of spinner component on every component?

I feel there should be only one spinner component, and that all the components should be able to call it in its controller. Might be inheritance concepts can be used.Please suggest, or provide a link for the sample code. 

Also how can I display a spinner component when the page loads for the first time?

As per Lightning developer guide, they recommend using the legacy aura:waiting, aura:doneWaiting, and aura:doneRendering
application events.