Spinner

Use the spinner component as a loading indicator when fetching or sending data based on CSS.

These css loaders are from Ivan. We use them because they really suit our needs. He said,

Their size must depend on the font-size of their parent.
They must only use the color of their parent.
They must be single elements with no children elements.

Basic Usage #

You only need an element with a loader loader--{id} class to create a spinner.

Colors #

Changing the color of the spinner is just as easy as changing the color of the text.

Sizes #

Changing the sizes of the spinner is also just as easy as changing the font size of the text.

Button Loading #

Here is how it look if we placed in buttons.

All Spinners #

There are so many of them. Pick your favourite one and click to copy.

loader--01 loader--02 loader--03 loader--04 loader--05 loader--06 loader--07 loader--08 loader--09 loader--10 loader--11 loader--12 loader--13 loader--14 loader--15 loader--16 loader--17 loader--18 loader--19 loader--20 loader--21 loader--22 loader--23 loader--24 loader--25 loader--26 loader--27 loader--28 loader--29 loader--30 loader--31 loader--32 loader--33 loader--34 loader--35 loader--36 loader--37 loader--38 loader--39 loader--40 loader--41 loader--42

Messages

Notifications