3
- Qoşuldu
- 10 Sen 2022
- Mesajlar
- 240
- Reaksiya hesabı
- 122
- Xallar
- 43
Salam, border css ile hazirladigim button loading snippetini sizlerle paylasmaq isteyirem.
CSS:
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
*, ::after, ::before {
box-sizing: border-box;
}
.button.is-loading {
color: transparent!important;
pointer-events: none;
}
.button.is-loading::after {
-webkit-animation: spinAround .5s infinite linear;
animation: spinAround .5s infinite linear;
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
}
.button.is-loading::after {
position: absolute;
left: calc(50% - (1em / 2));
top: calc(50% - (1em / 2));
position: absolute!important;
}
.button.is-info.is-loading::after {
border-color: transparent transparent #fff #fff!important;
}
.button.is-info {
background-color: #209cee;
border-color: transparent;
color: #fff;
}
.button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(.375em - 1px);
padding-left: calc(.625em - 1px);
padding-right: calc(.625em - 1px);
padding-top: calc(.375em - 1px);
position: relative;
vertical-align: top;
}
.button {
background-color: #fff;
border-color: #dbdbdb;
border-width: 1px;
color: #363636;
cursor: pointer;
justify-content: center;
padding-bottom: calc(.375em - 1px);
padding-left: .75em;
padding-right: .75em;
padding-top: calc(.375em - 1px);
text-align: center;
white-space: nowrap;
}
HTML:
<button type="button" class="button is-info is-loading">is-loading</button>