????
Current Path : C:/inetpub/vhost/sdoc.gdtsolutions.vn/package/public/sass/azzara/components/ |
Current File : C:/inetpub/vhost/sdoc.gdtsolutions.vn/package/public/sass/azzara/components/_loader.scss |
.loader, .is-loading:after { display: block; width: 1.5rem; height: 1.5rem; border: 3px solid $primary-color; border-bottom-color: transparent; background: transparent; border-radius: 50%; animation: 1s spin linear infinite; } .loader-sm, .is-loading-sm:after { width: 1rem; height: 1rem; border-width: 2px; } .loader-lg, .is-loading-lg:after { width: 2rem; height: 2rem; border-width: 5px; } .is-loading { position: relative; color: transparent !important; > * { opacity: 0.2 !important; } &:after { position: absolute; top: calc(50% - 1.5rem/2); left: calc(50% - 1.5rem/2);; content: ''; } } .is-loading-sm:after { top: calc(50% - 1rem/2); left: calc(50% - 1rem/2); } .is-loading-lg:after { top: calc(50% - 2rem/2); left: calc(50% - 2rem/2); } %loader-borderbottom-color { border-bottom-color: transparent !important; } @mixin loader-state($color) { border-color: $color; @extend %loader-borderbottom-color; } %loader-btn-and-card-bgnotwhite { border-color: #fff; @extend %loader-borderbottom-color; } .loader-default, .is-loading-default:after { @include loader-state($default-color); } .loader-primary, .is-loading-primary:after { @include loader-state($primary-color); } .loader-secondary, .is-loading-secondary:after { @include loader-state($secondary-color); } .loader-info, .is-loading-info:after { @include loader-state($info-color); } .loader-success, .is-loading-success:after { @include loader-state($success-color); } .loader-warning, .is-loading-warning:after { @include loader-state($warning-color); } .loader-danger, .is-loading-danger:after { @include loader-state($danger-color); } .btn-default, .card-default { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-primary, .card-primary { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-secondary, .card-secondary { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-info, .card-info { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-success, .card-success { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-warning, .card-warning { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } .btn-danger, .card-danger { &.is-loading:after { @extend %loader-btn-and-card-bgnotwhite; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }