Animated Loading SVG
Apply feedback to any element to show users content is loading.
Loading Button
Add loading feedback to a button.
Apply feedback to any element to show users content is loading.
<div class="o-grid | u-justify-center">
<div class="o-grid__item | u-col-3 u-h-5 u-relative | is-loading">
<svg class="c-loader | u-tc-primary" viewBox="0 0 120 30" aria-hidden="true">
<g>
<circle class="c-dots" cx="15" cy="15" r="15"/>
<circle class="c-dot" cx="60" cy="15" r="15"/>
<circle class="c-dots" cx="105" cy="15" r="15"/>
</g>
</svg>
</div>
</div>Add loading feedback to a button.
<button class="c-btn c-btn--positive | is-loading" type="button">
Search
<svg class="c-loader | u-tc-white" viewBox="0 0 120 30" aria-hidden="true">
<g>
<circle class="c-dots" cx="15" cy="15" r="15" />
<circle class="c-dot" cx="60" cy="15" r="15" />
<circle class="c-dots" cx="105" cy="15" r="15" />
</g>
</svg>
</button>