mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rework loaders
This commit is contained in:
Cory LaViska
2
dist/shoelace.css
vendored
2
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
@@ -48,27 +48,19 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="loaders">Loaders</h2>
|
||||
<p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code><span></code> element. You can use the <code>loader-small</code> and <code>loader-big</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><span class="loader loader-small"></span>
|
||||
<p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code><span></code> element. You can use the <code>loader-xs|sm|lg|xl</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><span class="loader loader-xs"></span>
|
||||
<span class="loader loader-sm"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
<span class="loader loader-lg"></span>
|
||||
<span class="loader loader-xl"></span>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader loader-xs"></span>
|
||||
<span class="loader loader-sm"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
<h3 id="background-loaders">Background Loaders</h3>
|
||||
<p>You can simulate a background loader using <code>loader-bg</code>. This is achieved using <code>position: relative</code> on the container and the <code>::after</code> pseudo-element. You can use the <code>loader-bg-small</code> and <code>loader-bg-big</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</code></pre>
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
<span class="loader loader-lg"></span>
|
||||
<span class="loader loader-xl"></span>
|
||||
</div>
|
||||
|
||||
<h3 id="variations">Variations</h3>
|
||||
@@ -88,6 +80,41 @@
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span></p>
|
||||
<h3 id="background-loaders">Background Loaders</h3>
|
||||
<p>You can simulate a background loader using <code>loader-bg</code>. This is achieved using <code>position: relative</code> on the container and the <code>::after</code> pseudo-element. You can use the <code>loader-bg-xs|sm|lg|xl</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><div class="loader-bg loader-bg-xs"></div>
|
||||
<div class="loader-bg loader-bg-sm"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-lg"></div>
|
||||
<div class="loader-bg loader-bg-xl"></div>
|
||||
</code></pre>
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-xs"></div>
|
||||
<div class="loader-bg loader-bg-sm"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-lg"></div>
|
||||
<div class="loader-bg loader-bg-xl"></div>
|
||||
</div>
|
||||
|
||||
<h3 id="background-variations">Background Variations</h3>
|
||||
<p>Use the <code>loader-bg-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><div class="loader-bg loader-bg-secondary"></div>
|
||||
<div class="loader-bg loader-bg-success"></div>
|
||||
<div class="loader-bg loader-bg-info"></div>
|
||||
<div class="loader-bg loader-bg-warning"></div>
|
||||
<div class="loader-bg loader-bg-danger"></div>
|
||||
<div class="loader-bg loader-bg-light"></div>
|
||||
<div class="loader-bg loader-bg-dark"></div>
|
||||
</code></pre>
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-secondary"></div>
|
||||
<div class="loader-bg loader-bg-success"></div>
|
||||
<div class="loader-bg loader-bg-info"></div>
|
||||
<div class="loader-bg loader-bg-warning"></div>
|
||||
<div class="loader-bg loader-bg-danger"></div>
|
||||
<div class="loader-bg loader-bg-light"></div>
|
||||
<div class="loader-bg loader-bg-dark"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -178,12 +178,17 @@ a code {
|
||||
}
|
||||
|
||||
/* Loader example */
|
||||
.loader-example {
|
||||
margin-left: -.5rem;
|
||||
margin-right: -.5rem;
|
||||
}
|
||||
|
||||
.loader-example div {
|
||||
float: left;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: dashed 1px #ddd;
|
||||
margin-right: .5rem;
|
||||
margin: 0 .5rem 1rem .5rem;
|
||||
}
|
||||
|
||||
/* Tabs example */
|
||||
|
||||
@@ -1,116 +1,228 @@
|
||||
/*! Loaders */
|
||||
:root {
|
||||
--loader-bg-color: var(--component-bg-color);
|
||||
--loader-border-color: var(--state-primary);
|
||||
--loader-border-width: .2rem;
|
||||
--loader-border-width-small: calc(var(--loader-border-width) / 2);
|
||||
--loader-border-width-big: calc(var(--loader-border-width) * 2);
|
||||
--loader-size: 2rem;
|
||||
--loader-size-small: calc(var(--loader-size) / 2);
|
||||
--loader-size-big: calc(var(--loader-size) * 2);
|
||||
--loader-thickness: .25rem;
|
||||
--loader-thickness-xs: calc(var(--loader-thickness) / 2);
|
||||
--loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
|
||||
--loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
|
||||
--loader-thickness-xl: calc(var(--loader-thickness) * 2);
|
||||
--loader-size-xs: 1rem;
|
||||
--loader-size-sm: 2rem;
|
||||
--loader-size: 3rem;
|
||||
--loader-size-lg: 4rem;
|
||||
--loader-size-xl: 5rem;
|
||||
--loader-speed: 750ms;
|
||||
--loader-margin-x: .5em;
|
||||
--loader-margin-y: 0;
|
||||
|
||||
/* Default */
|
||||
--loader-color: var(--state-primary);
|
||||
--loader-bg-color: color(var(--state-primary) lightness(90%));
|
||||
|
||||
/* Secondary */
|
||||
--loader-color-secondary: var(--state-secondary);
|
||||
--loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
|
||||
|
||||
/* Success */
|
||||
--loader-color-success: var(--state-success);
|
||||
--loader-bg-color-success: color(var(--state-success) lightness(90%));
|
||||
|
||||
/* Info */
|
||||
--loader-color-info: var(--state-info);
|
||||
--loader-bg-color-info: color(var(--state-info) lightness(90%));
|
||||
|
||||
/* Warning */
|
||||
--loader-color-warning: var(--state-warning);
|
||||
--loader-bg-color-warning: color(var(--state-warning) lightness(90%));
|
||||
|
||||
/* Danger */
|
||||
--loader-color-danger: var(--state-danger);
|
||||
--loader-bg-color-danger: color(var(--state-danger) lightness(90%));
|
||||
|
||||
/* Light */
|
||||
--loader-color-light: var(--state-light);
|
||||
--loader-bg-color-light: color(var(--state-light) lightness(90%));
|
||||
|
||||
/* Dark */
|
||||
--loader-color-dark: var(--state-dark);
|
||||
--loader-bg-color-dark: color(var(--state-dark) lightness(90%));
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: var(--loader-size);
|
||||
height: var(--loader-size);
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: var(--loader-thickness);
|
||||
border-color: var(--loader-bg-color);
|
||||
border-top-color: var(--loader-color);
|
||||
border-left-color: var(--loader-color);
|
||||
display: inline-block;
|
||||
animation: loader var(--loader-speed) linear infinite;
|
||||
margin: var(--loader-margin-y) var(--loader-margin-x);
|
||||
vertical-align: middle;
|
||||
|
||||
&.loader-xs {
|
||||
width: var(--loader-size-xs);
|
||||
height: var(--loader-size-xs);
|
||||
border-width: var(--loader-thickness-xs);
|
||||
}
|
||||
|
||||
&.loader-sm {
|
||||
width: var(--loader-size-sm);
|
||||
height: var(--loader-size-sm);
|
||||
border-width: var(--loader-thickness-sm);
|
||||
}
|
||||
|
||||
&.loader-lg {
|
||||
width: var(--loader-size-lg);
|
||||
height: var(--loader-size-lg);
|
||||
border-width: var(--loader-thickness-lg);
|
||||
}
|
||||
|
||||
&.loader-xl {
|
||||
width: var(--loader-size-xl);
|
||||
height: var(--loader-size-xl);
|
||||
border-width: var(--loader-thickness-xl);
|
||||
}
|
||||
|
||||
&.loader-secondary {
|
||||
border-color: var(--loader-bg-color-secondary);
|
||||
border-top-color: var(--loader-color-secondary);
|
||||
border-left-color: var(--loader-color-secondary);
|
||||
}
|
||||
|
||||
&.loader-success {
|
||||
border-color: var(--loader-bg-color-success);
|
||||
border-top-color: var(--loader-color-success);
|
||||
border-left-color: var(--loader-color-success);
|
||||
}
|
||||
|
||||
&.loader-info {
|
||||
border-color: var(--loader-bg-color-info);
|
||||
border-top-color: var(--loader-color-info);
|
||||
border-left-color: var(--loader-color-info);
|
||||
}
|
||||
|
||||
&.loader-warning {
|
||||
border-color: var(--loader-bg-color-warning);
|
||||
border-top-color: var(--loader-color-warning);
|
||||
border-left-color: var(--loader-color-warning);
|
||||
}
|
||||
|
||||
&.loader-danger {
|
||||
border-color: var(--loader-bg-color-danger);
|
||||
border-top-color: var(--loader-color-danger);
|
||||
border-left-color: var(--loader-color-danger);
|
||||
}
|
||||
|
||||
&.loader-light {
|
||||
border-color: var(--loader-bg-color-light);
|
||||
border-top-color: var(--loader-color-light);
|
||||
border-left-color: var(--loader-color-light);
|
||||
}
|
||||
|
||||
&.loader-dark {
|
||||
border-color: var(--loader-bg-color-dark);
|
||||
border-top-color: var(--loader-color-dark);
|
||||
border-left-color: var(--loader-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-bg {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - var(--loader-size) / 2);
|
||||
left: calc(50% - var(--loader-size) / 2);
|
||||
width: var(--loader-size);
|
||||
height: var(--loader-size);
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: var(--loader-thickness);
|
||||
border-color: var(--loader-bg-color);
|
||||
border-top-color: var(--loader-color);
|
||||
border-left-color: var(--loader-color);
|
||||
animation: loader var(--loader-speed) linear infinite;
|
||||
}
|
||||
|
||||
&.loader-bg-xs::after {
|
||||
top: calc(50% - var(--loader-size-xs) / 2);
|
||||
left: calc(50% - var(--loader-size-xs) / 2);
|
||||
width: var(--loader-size-xs);
|
||||
height: var(--loader-size-xs);
|
||||
border-width: var(--loader-thickness-xs);
|
||||
}
|
||||
|
||||
&.loader-bg-sm::after {
|
||||
top: calc(50% - var(--loader-size-sm) / 2);
|
||||
left: calc(50% - var(--loader-size-sm) / 2);
|
||||
width: var(--loader-size-sm);
|
||||
height: var(--loader-size-sm);
|
||||
border-width: var(--loader-thickness-sm);
|
||||
}
|
||||
|
||||
&.loader-bg-lg::after {
|
||||
top: calc(50% - var(--loader-size-lg) / 2);
|
||||
left: calc(50% - var(--loader-size-lg) / 2);
|
||||
width: var(--loader-size-lg);
|
||||
height: var(--loader-size-lg);
|
||||
border-width: var(--loader-thickness-lg);
|
||||
}
|
||||
|
||||
&.loader-bg-xl::after {
|
||||
top: calc(50% - var(--loader-size-xl) / 2);
|
||||
left: calc(50% - var(--loader-size-xl) / 2);
|
||||
width: var(--loader-size-xl);
|
||||
height: var(--loader-size-xl);
|
||||
border-width: var(--loader-thickness-xl);
|
||||
}
|
||||
|
||||
&.loader-bg-secondary::after {
|
||||
border-color: var(--loader-bg-color-secondary);
|
||||
border-top-color: var(--loader-color-secondary);
|
||||
border-left-color: var(--loader-color-secondary);
|
||||
}
|
||||
|
||||
&.loader-bg-success::after {
|
||||
border-color: var(--loader-bg-color-success);
|
||||
border-top-color: var(--loader-color-success);
|
||||
border-left-color: var(--loader-color-success);
|
||||
}
|
||||
|
||||
&.loader-bg-info::after {
|
||||
border-color: var(--loader-bg-color-info);
|
||||
border-top-color: var(--loader-color-info);
|
||||
border-left-color: var(--loader-color-info);
|
||||
}
|
||||
|
||||
&.loader-bg-warning::after {
|
||||
border-color: var(--loader-bg-color-warning);
|
||||
border-top-color: var(--loader-color-warning);
|
||||
border-left-color: var(--loader-color-warning);
|
||||
}
|
||||
|
||||
&.loader-bg-danger::after {
|
||||
border-color: var(--loader-bg-color-danger);
|
||||
border-top-color: var(--loader-color-danger);
|
||||
border-left-color: var(--loader-color-danger);
|
||||
}
|
||||
|
||||
&.loader-bg-light::after {
|
||||
border-color: var(--loader-bg-color-light);
|
||||
border-top-color: var(--loader-color-light);
|
||||
border-left-color: var(--loader-color-light);
|
||||
}
|
||||
|
||||
&.loader-bg-dark::after {
|
||||
border-color: var(--loader-bg-color-dark);
|
||||
border-top-color: var(--loader-color-dark);
|
||||
border-left-color: var(--loader-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader-bg::after {
|
||||
width: var(--loader-size);
|
||||
height: var(--loader-size);
|
||||
border-radius: 50%;
|
||||
border: solid var(--loader-border-width) var(--loader-bg-color);
|
||||
border-top-color: var(--loader-border-color);
|
||||
border-left-color: var(--loader-border-color);
|
||||
display: inline-block;
|
||||
animation: loader var(--loader-speed) linear infinite;
|
||||
vertical-align: middle;
|
||||
margin: var(--loader-margin-y) var(--loader-margin-x);
|
||||
}
|
||||
|
||||
.loader-bg {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.loader-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - var(--loader-size) / 2);
|
||||
left: calc(50% - var(--loader-size) / 2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loader-small,
|
||||
.loader-bg-small::after {
|
||||
width: var(--loader-size-small);
|
||||
height: var(--loader-size-small);
|
||||
border-width: var(--loader-border-width-small);
|
||||
}
|
||||
|
||||
.loader-big,
|
||||
.loader-bg-big::after {
|
||||
width: var(--loader-size-big);
|
||||
height: var(--loader-size-big);
|
||||
border-width: var(--loader-border-width-big);
|
||||
}
|
||||
|
||||
.loader-bg-small::after {
|
||||
top: calc(50% - var(--loader-size-small) / 2);
|
||||
left: calc(50% - var(--loader-size-small) / 2);
|
||||
}
|
||||
|
||||
.loader-bg-big::after {
|
||||
top: calc(50% - var(--loader-size-big) / 2);
|
||||
left: calc(50% - var(--loader-size-big) / 2);
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.loader-secondary,
|
||||
.loader-secondary.loader-bg::after {
|
||||
border-top-color: var(--state-secondary);
|
||||
border-left-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.loader-success,
|
||||
.loader-success.loader-bg::after {
|
||||
border-top-color: var(--state-success);
|
||||
border-left-color: var(--state-success);
|
||||
}
|
||||
|
||||
.loader-info,
|
||||
.loader-info.loader-bg::after {
|
||||
border-top-color: var(--state-info);
|
||||
border-left-color: var(--state-info);
|
||||
}
|
||||
|
||||
.loader-warning,
|
||||
.loader-warning.loader-bg::after {
|
||||
border-top-color: var(--state-warning);
|
||||
border-left-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.loader-danger,
|
||||
.loader-danger.loader-bg::after {
|
||||
border-top-color: var(--state-danger);
|
||||
border-left-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.loader-light,
|
||||
.loader-light.loader-bg::after {
|
||||
border-top-color: var(--state-light);
|
||||
border-left-color: var(--state-light);
|
||||
border-bottom-color: var(--state-dark);
|
||||
border-right-color: var(--state-dark);
|
||||
}
|
||||
|
||||
.loader-dark,
|
||||
.loader-dark.loader-bg::after {
|
||||
border-top-color: var(--state-dark);
|
||||
border-left-color: var(--state-dark);
|
||||
border-bottom-color: var(--state-light);
|
||||
border-right-color: var(--state-light);
|
||||
}
|
||||
|
||||
@@ -6,33 +6,21 @@ description: These pure CSS loaders are easy to use and look great.
|
||||
|
||||
## Loaders
|
||||
|
||||
Create a pure CSS loader by applying the `loader` class to an empty `<span>` element. You can use the `loader-small` and `loader-big` modifiers to change the size.
|
||||
Create a pure CSS loader by applying the `loader` class to an empty `<span>` element. You can use the `loader-xs|sm|lg|xl` modifiers to change the size.
|
||||
|
||||
```html
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader loader-xs"></span>
|
||||
<span class="loader loader-sm"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
<span class="loader loader-lg"></span>
|
||||
<span class="loader loader-xl"></span>
|
||||
```
|
||||
<div class="input-single">
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader loader-xs"></span>
|
||||
<span class="loader loader-sm"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
### Background Loaders
|
||||
|
||||
You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-small` and `loader-bg-big` modifiers to change the size.
|
||||
|
||||
```html
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
```
|
||||
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
<span class="loader loader-lg"></span>
|
||||
<span class="loader loader-xl"></span>
|
||||
</div>
|
||||
|
||||
### Variations
|
||||
@@ -56,3 +44,47 @@ Use the `loader-*` modifier to create variations.
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span>
|
||||
|
||||
### Background Loaders
|
||||
|
||||
You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-xs|sm|lg|xl` modifiers to change the size.
|
||||
|
||||
```html
|
||||
<div class="loader-bg loader-bg-xs"></div>
|
||||
<div class="loader-bg loader-bg-sm"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-lg"></div>
|
||||
<div class="loader-bg loader-bg-xl"></div>
|
||||
```
|
||||
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-xs"></div>
|
||||
<div class="loader-bg loader-bg-sm"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-lg"></div>
|
||||
<div class="loader-bg loader-bg-xl"></div>
|
||||
</div>
|
||||
|
||||
### Background Variations
|
||||
|
||||
Use the `loader-bg-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<div class="loader-bg loader-bg-secondary"></div>
|
||||
<div class="loader-bg loader-bg-success"></div>
|
||||
<div class="loader-bg loader-bg-info"></div>
|
||||
<div class="loader-bg loader-bg-warning"></div>
|
||||
<div class="loader-bg loader-bg-danger"></div>
|
||||
<div class="loader-bg loader-bg-light"></div>
|
||||
<div class="loader-bg loader-bg-dark"></div>
|
||||
```
|
||||
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-secondary"></div>
|
||||
<div class="loader-bg loader-bg-success"></div>
|
||||
<div class="loader-bg loader-bg-info"></div>
|
||||
<div class="loader-bg loader-bg-warning"></div>
|
||||
<div class="loader-bg loader-bg-danger"></div>
|
||||
<div class="loader-bg loader-bg-light"></div>
|
||||
<div class="loader-bg loader-bg-dark"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user