turretcss

Spinner Sizes

About

The .spinner class can be added to any element to add a ::before pseudo element that has a spin animation and border styles to emulate a loading indicator.

Example

HTML

<div class="spinner spinner-xxl">...</div>
<div class="spinner spinner-xl">...</div>
<div class="spinner spinner-l">...</div>
<div class="spinner spinner-m">...</div>
<div class="spinner spinner-s">...</div>
<div class="spinner spinner-xs">...</div>
<div class="spinner spinner-xxs">...</div>

CSS

--spinner-xxl-size: 2.5rem;
--spinner-xl-size: 2.25rem;
--spinner-l-size: 2rem;
--spinner-s-size: 1.5rem;
--spinner-xs-size: 1.25rem;
--spinner-xxs-size: 1rem;

Related