Spinners / Loaders

Indicate the loading state of your project by using Scratch "spinners".

Add custom javascript code to toggle its visibility.

Default Spinners

The most common and lightweight spinners.

Add your own colours by changing the border-top-colorthe spinners in your custom CSS class.


                            <div class="spinner-blue"></div>
                            <div class="spinner-green"></div>
                            <div class="spinner-yellow"></div>
                            <div class="spinner-red"></div>
                            <div class="spinner-dark"></div>
                            <div class="spinner-orange"></div>

Default Spinners (inverted)


                            <div class="spinner-blue-inv"></div>
                            <div class="spinner-green-inv"></div>
                            <div class="spinner-yellow-inv"></div>
                            <div class="spinner-red-inv"></div>
                            <div class="spinner-dark-inv"></div>
                            <div class="spinner-orange-inv"></div>

Arc spinner


                            <div class="spinner-arc-blue"></div>
                            <div class="spinner-arc-green"></div>
                            <div class="spinner-arc-yellow"></div>
                            <div class="spinner-arc-red"></div>
                            <div class="spinner-arc-dark"></div>
                            <div class="spinner-arc-orange"></div>

You can add your own colours by changing the border colour of these arc loaders in your custom CSS class.

Glowing loader


                            <div class="spinner-glow-blue"></div>
                            <div class="spinner-glow-green"></div>
                            <div class="spinner-glow-yellow"></div>
                            <div class="spinner-glow-red"></div>
                            <div class="spinner-glow-dark"></div>
                            <div class="spinner-glow-orange"></div>

You can add your own colours by changing the background colour of these Glowing loaders in your custom CSS class.

Duo spinner


                            <div class="spinner-duo-blue"></div>
                            <div class="spinner-duo-green"></div>
                            <div class="spinner-duo-yellow"></div>
                            <div class="spinner-duo-red"></div>
                            <div class="spinner-duo-dark"></div>
                            <div class="spinner-duo-orange"></div>

Add your own colours by changing the border-top-color andborder-bottom-color of these duo spinners in your custom CSS class.

Sizes

You can manipulate the size of the spinner / loader from the predefined classes from Scratch.

Large spinners/loaders

Make the spinners/loaders larger by adding the class spinner-lrg


                            <div class="spinner-blue spinner-lrg"></div>
                            <div class="spinner-duo-red spinner-lrg"></div>
                            <div class="spinner-arc-dark spinner-lrg"></div>

Small spinners/loaders

Make the spinners/loaders smaller by adding the class spinner-sml


                            <div class="spinner-blue spinner-sml"></div>
                            <div class="spinner-duo-red spinner-sml"></div>
                            <div class="spinner-arc-dark spinner-sml"></div>

LOADING...