mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 19:26:14 -04:00
Add a loading indicator for aria-busy
This commit is contained in:
parent
0e7894c48e
commit
dc42ec62f3
25 changed files with 517 additions and 301 deletions
55
scss/utilities/_loading.scss
Normal file
55
scss/utilities/_loading.scss
Normal file
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
||||
|
||||
// Cursor
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
// Everyting except form elements
|
||||
[aria-busy="true"]:not(input):not(select):not(textarea) {
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 0.1875em solid currentColor;
|
||||
border-radius: 1em;
|
||||
border-right-color: transparent;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
content: '';
|
||||
opacity: var(--loading-spinner-opacity);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons and links
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a {
|
||||
&[aria-busy="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation: rotate
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue