You need a loading spinner for a form, a page or a dashboard. This lesson takes one from the library to a working web page in two minutes, with nothing to install.
Open Motion Studio
Open Motion Studio. The whole library is playing at once. That is on purpose: you choose motion by watching it, not by reading its name.
The screen has three parts: the kinds of motion on the left, the playing grid in the middle, and, once you open a motion, the stage and its settings on the right.
Pick a loader
On the left under Kinds, press Loaders. The grid now shows only loaders: spinners, dots, bars, a clock, a charging battery and more. Press Ring spinner.
It opens on the right on a large stage, with its name, the kind of motion it is (Loop), and three tabs: Customise, Code and Export.
Make it your colour
In Customise, find Colours, press the first square and pick your brand colour, or type its code. The stage changes as you pick. Drag Size to the size you want, in pixels. That is enough for now; lesson 3 covers every setting.
Copy the code
Open the Code tab. Along the top are the formats: HTML, CSS, React, Vue and Svelte.
- Under HTML, press Copy and paste it where the spinner should appear in your page.
- Under CSS, press Copy and paste it into your stylesheet.
Or press Copy all to take the HTML and CSS together, ready to paste into one file.
Reload your page. The spinner turns, in your colour, at your size.
Why it will not clash with your page
Every class, keyframe and custom property of a motion starts with its own name, so its CSS cannot clash with yours, and two motions can sit on one page. The spinner is plain HTML and CSS: no JavaScript library, no web font, no image file.
It respects reduced motion
The last rule of the CSS is a prefers-reduced-motion media query. People who ask their system for less motion (in Windows, macOS, iOS or Android settings) see the spinner drawn but still. You did nothing extra, and your page is more accessible for it.
Motion Studio itself respects the setting too: if your system asks for less motion, the library starts still, and Play all in the app bar starts it.
Try the whole page
Want to see it outside your project first? Press Page .html in the Code tab. You get a small page that plays the motion, to open in any browser or send to a colleague.
Next: finding the right motion among all of them.