Geri çağırış Lim10Ata\Flatix\xfwidgets::gethtml yanlışdır (error_invalid_class).

Forumda sizi görməkdə şadıq 👋,

Forum məzmununa və bütün xidmətlərimizə daxil olmaq üçün qeydiyyatdan keçməli və ya foruma daxil olmalısınız. Foruma üzv olmaq tamamilə ödənişsizdir.

Qeydiyyatdan keç

Loading button snippet

3

GameKing

Məhşur istifadəçi
Silver istifadeci
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>
 
Üst