GuerillaStudio/compteur-de-greve
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/compteur-de-greve.git synced 2024-12-18 05:41:56 +00:00
Code Issues Activity

Loading state

Browse source
This commit is contained in:
Tixie Salander 2023-03-02 10:40:04 +01:00
parent f20d83a25d
commit 22a778d683
4 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/css/2-components/_buttons.scss
View file

@ -177,3 +177,48 @@ $btn-border-width: 0.1rem;
font-size: clamp(2.5rem, 3.8vw, 3.8rem);
line-height: 1.15em;
}
// State
// --------------------------------------------------------------
.btn--loading,
.btn--loading:link,
.btn--loading:visited {
position: relative;
z-index: 0;
overflow: hidden;
cursor: progress;
}
@keyframes btn-loading-rotate {
100% {
transform: rotate(1turn);
}
}
.btn--loading::before {
position: absolute;
z-index: -2;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
animation: btn-loading-rotate 1s linear infinite;
background-color: #1a232a;
background-image: conic-gradient(transparent, $color-pink-1, transparent 30%);
background-position: 0 0;
background-repeat: no-repeat;
content: "";
}
.btn--loading::after {
position: absolute;
z-index: -1;
top: 0.6rem;
left: 0.6rem;
width: calc(100% - 1.2rem);
height: calc(100% - 1.2rem);
background: $color-purple-1;
border-radius: 0.5rem;
content: "";
}

3
src/css/2-components/_notifications.scss
View file

@ -72,7 +72,8 @@ $notif-error: $color-red;
.notif--successPlusOne {
position: relative;
animation: success-shake 1s linear both;
animation: success-shake 0.75s linear both;
animation-delay: 1s;
transform: scale(1.1);
}

2
src/index.njk
View file

@ -23,7 +23,7 @@ permalink:
<article class="w100 maxw380px text-center">
<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span>&nbsp;?</h2>
<div class="flex flex-col">
<div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div>
{# <div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div> #}
<div class="gridstack mb15">
<form action="/" method="post" class="flex" x-bind="form">
<button class="btn btn--big btn--icoYellow w100" x-bind="button">

3
src/js/script.js
View file

@ -28,7 +28,8 @@ document.addEventListener('alpine:init', () => {
},
button: {
["x-bind:disabled"]: "loading"
["x-bind:disabled"]: "loading",
["x-bind:class"]: "{ 'btn--loading' : loading }"
},
thanks: {