Loader

Loader - Video Skeleton

Macquarie Business School

Join a new generation of changemakers where status quos are shattered, and business is reimagined.

Macquarie Business School rethinks, reimagines and rewrites the rules of business, so our community of students, staff, alumni and partners can find their purpose and collaborate to deliver solutions and ideas with global impact.

Loader - Basic

                        <div class="loader loader--spinner" role="status">
                            <span class="visually-hidden">Loading...</span>
                            <div class="loader__container" aria-hidden="true">
                                <div class="loader__layer">
                                    <div class="loader__border"></div>
                                    <div class="loader__clipper loader__clipper--left">
                                        <div class="loader__circle"></div>
                                    </div>
                                    <div class="loader__patch">
                                        <div class="loader__circle"></div>
                                    </div>
                                    <div class="loader__clipper loader__clipper--right">
                                        <div class="loader__circle"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

Loader - Simplified

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        <div class="loader--container">
                            <div class="loader--rotate"></div>
                        </div>

Loader - Slide

Title

                        <div class="loader--container">
                            <div class="loader--slide">
                                <div class="loader--slider"></div>
                            </div>
                        </div>

Loader - Bar

85% Completed

22 minutes remaining

                        <div class="loader loader--bar" role="status">
                            <span class="visually-hidden">Loading...</span>
                            <div class="loader__container">
                                <div class="loader__ico" aria-hidden="true">
                                    <i class="ico ico--lg ico--i ico--i-timer"></i>
                                    <span>Loading...</span>
                                </div>
                                <div class="loader__graph" aria-hidden="true"></div>
                                <div class="loader__info">
                                    <p class="loader__info--percentage-completed"><span>85</span>% Completed</p>
                                    <p class="loader__info--time-remaining"><span>22 minutes</span> remaining</p>
                                </div>
                            </div>
                        </div>