Skip to content

Component: Loader #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devmount merged 3 commits into from
Oct 14, 2024
Merged

Component: Loader #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be20e7a
➕ Component: Loader
devmount Oct 13, 2024
5520990
➕ Add loder component and busy buttons
devmount Oct 14, 2024
e635fb7
➕ Button link
devmount Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 74 additions & 53 deletions docs/pages/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,10 @@ Buttons indicate actions the user can trigger on click. Buttons already have a b
The default button without any class is already utilizing accent coloring. In addition, you can use `neutral`, `positive` and `negative` classes for the corresponding colors.

<div class="demo flex flex-wrap gap-4">
<div>
<button>Send post</button>
</div>
<div class="flex-col gap-2 items-center">
<button class="neutral">Return</button>
<code>.neutral</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="positive">Save profile</button>
<code>.positive</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="negative">Delete account</button>
<code>.negative</code>
</div>
<button>Send post</button>
<button class="neutral">Return</button>
<button class="positive">Save profile</button>
<button class="negative">Delete account</button>
</div>

```html
Expand All @@ -36,27 +25,31 @@ The default button without any class is already utilizing accent coloring. In ad
<button class="negative">Delete account</button>
```

Using the `disabled` attribute deactivates buttons. If you're using `onclick` event handlers, make sure this case is handled.

<div class="demo flex flex-wrap gap-4">
<button disabled>Send post</button>
<button class="neutral" disabled>Return</button>
<button class="positive" disabled>Save profile</button>
<button class="negative" disabled>Delete account</button>
</div>

```html
<button disabled>Send post</button>
<button class="neutral" disabled>Return</button>
<button class="positive" disabled>Save profile</button>
<button class="negative" disabled>Delete account</button>
```

### Secondary button

For less important buttons with outline and transparent backgrounds, the `hollow` class can be used. It can be combined with all other button related classes.

<div class="demo flex flex-wrap gap-4">
<div class="flex-col gap-2 items-center">
<button class="hollow">Send post</button>
<code>.hollow</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="hollow neutral">Return</button>
<code>.hollow.neutral</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="hollow positive">Save profile</button>
<code>.hollow.positive</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="hollow negative">Delete account</button>
<code>.hollow.negative</code>
</div>
<button class="hollow">Send post</button>
<button class="hollow neutral">Return</button>
<button class="hollow positive">Save profile</button>
<button class="hollow negative">Delete account</button>
</div>

```html
Expand All @@ -66,19 +59,29 @@ For less important buttons with outline and transparent backgrounds, the `hollow
<button class="hollow negative">Delete account</button>
```

The `disabled` attribute can be set on secondary buttons too.

<div class="demo flex flex-wrap gap-4">
<button class="hollow" disabled>Send post</button>
<button class="hollow neutral" disabled>Return</button>
<button class="hollow positive" disabled>Save profile</button>
<button class="hollow negative" disabled>Delete account</button>
</div>

```html
<button class="hollow" disabled>Send post</button>
<button class="hollow neutral" disabled>Return</button>
<button class="hollow positive" disabled>Save profile</button>
<button class="hollow negative" disabled>Delete account</button>
```

### Link button

Use the `button` class to apply all button styles on `<a>` tags. That way you can create button links for navigation.

<div class="demo flex flex-wrap gap-4">
<div class="flex-col gap-2 items-center">
<a class="button" href="#">Go shopping</a>
<code>.button</code>
</div>
<div class="flex-col gap-2 items-center">
<a class="button neutral" href="#">Go back</a>
<code>.button.neutral</code>
</div>
<a class="button" href="#">Go shopping</a>
<a class="button neutral" href="#">Go back</a>
</div>

```html
Expand All @@ -91,36 +94,54 @@ Use the `button` class to apply all button styles on `<a>` tags. That way you ca
Use the `rounded-full` utility class to give buttons a pill form.

<div class="demo flex flex-wrap gap-4">
<div class="flex-col gap-2 items-center">
<button class="rounded-full">Send post</button>
<code>.rounded-full</code>
</div>
<div class="flex-col gap-2 items-center">
<button class="neutral rounded-full">Return</button>
<code>.neutral.rounded-full</code>
</div>
<button class="rounded-full">Send post</button>
<button class="neutral rounded-full">Return</button>
<button class="positive hollow rounded-full">Save profile</button>
</div>

```html
<button class="rounded-full">Send post</button>
<button class="neutral rounded-full">Return</button>
<button class="positive hollow rounded-full">Save profile</button>
```

### Ghost button

Use the `ghost` class to keep button sizing without background color or border.
Use the `ghost` class to keep button sizing without background color or border. Works on link buttons too.

<div class="demo flex flex-wrap gap-4">
<div class="flex-col gap-2 items-center">
<button class="ghost">GitHub</button>
<code>.ghost</code>
</div>
<button>Subscribe</button>
<button class="ghost">Docs</button>
<a class="ghost button" href="#">GitHub</a>
</div>

```html
<button class="ghost">GitHub</button>
<button>Subscribe</button>
<button class="ghost">Docs</button>
<a class="ghost button" href="#">GitHub</a>
```

### Busy button

Use the `busy` class to replace the text of a button with a <a href="/components/loader">loader</a> while keeping the button size. Works with secondary buttons, link buttons and pill buttons. Busy buttons are disabled.

<div class="demo flex flex-wrap items-center gap-8">
<button class="busy">Send post</button>
<button class="busy neutral rounded-full">Return</button>
<button class="busy positive hollow">Save profile</button>
<button class="busy negative hollow rounded-full">Delete account</button>
<button class="busy ghost">Load settings</button>
</div>

```html
<button class="busy">Send post</button>
<button class="busy neutral rounded-full">Return</button>
<button class="busy positive hollow">Save profile</button>
<button class="busy negative hollow rounded-full">Delete account</button>
<button class="busy ghost">Load settings</button>
```


### Button group

Use the `button-group` class on an element containing buttons, to group buttons to a single logical unit.
Expand Down
76 changes: 76 additions & 0 deletions docs/pages/components/loader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: 'Components: Loader - Sloth.css'
description: Loader component of Sloth.css.
---

## Loader

A loader indicates a busy state, giving visual feedback for users that a process currently takes some time. This reassures the user, that an action got triggered in the first place and is still working or progressing.

### Loader colors

Use the `loader` class to add a loading indicator. The loadinng indicator is in accent colors per default. Use the `neutral`, `positive` and `negative` classes to change the color accordingly.

<div class="demo flex flex-wrap gap-8">
<div class="loader"></div>
<div class="loader neutral"></div>
<div class="loader positive"></div>
<div class="loader negative"></div>
</div>

```html
<div class="loader"></div>
<div class="loader neutral"></div>
<div class="loader positive"></div>
<div class="loader negative"></div>
```

### Loader sizes

Use the `sm` or `lg` classes to reduce or increase the size of a loader.

<div class="demo flex flex-wrap items-center gap-8">
<div class="loader sm"></div>
<div class="loader"></div>
<div class="loader lg"></div>
</div>

```html
<div class="loader sm"></div>
<div class="loader"></div>
<div class="loader lg"></div>
```

### Double loader

Use the `double` class to make the loading animation more emphasized. Double loaders support all colors and sizes too.

<div class="demo flex flex-wrap items-center gap-8">
<div class="loader double negative sm"></div>
<div class="loader double"></div>
<div class="loader double neutral lg"></div>
</div>

```html
<div class="loader double negative sm"></div>
<div class="loader double"></div>
<div class="loader double neutral lg"></div>
```

### Button loader

Loaders are also supported on <a href="/components/button">button</a> elements. Use the `busy` class to replace the text of a button with a loader while keeping the button size.

<div class="demo flex flex-wrap items-center gap-8">
<button class="busy">Send post</button>
<button class="busy neutral">Return</button>
<button class="busy positive">Save profile</button>
<button class="busy negative">Delete account</button>
</div>

```html
<button class="busy">Send post</button>
<button class="busy neutral">Return</button>
<button class="busy positive">Save profile</button>
<button class="busy negative">Delete account</button>
```
1 change: 1 addition & 0 deletions eleventy.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ module.exports = function(eleventyConfig) {
'breadcrumb',
'button',
'callout',
'loader',
'separator',
'state',
'toast',
Expand Down
2 changes: 1 addition & 1 deletion src/_components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@import 'components/_callout.css';
/* @import 'components/_card.css'; */
/* @import 'components/_input.css'; */
/* @import 'components/_loader.css'; */
@import 'components/_loader.css';
/* @import 'components/_modal.css'; */
@import 'components/_separator.css';
/* @import 'components/_sequence.css'; */
Expand Down
6 changes: 5 additions & 1 deletion src/_config.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,9 @@
}
@keyframes pulse {
50% { box-shadow: 0 0 0 0 var(--color-bg-accent); }
100% { box-shadow: 0 0 0 .5rem rgba(0, 0, 0, 0); }
100% { box-shadow: 0 0 0 .5rem rgba(0, 0, 0, 0); }
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
Loading