diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 1484def..23a12a6 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -279,88 +279,6 @@ h5 { width: 15vw; } - - -.loader { - margin: 0 auto; - position: relative; - width: 80px; - height: 20px; - - &.loader-top { - top: 30px; - } - - div { - position: absolute; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--color-menu-background); - animation-timing-function: cubic-bezier(0, 1, 1, 0); - } - - &.loader-menu div { - width: 8px; - height: 8px; - background: var(--color-menu-text); - } - - div:nth-child(1) { - left: 8px; - animation: lds-ellipsis1 0.6s infinite; - } - - div:nth-child(2) { - left: 8px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(3) { - left: 32px; - animation: lds-ellipsis2 0.6s infinite; - } - - div:nth-child(4) { - left: 56px; - animation: lds-ellipsis3 0.6s infinite; - } -} - -@keyframes lds-ellipsis1 { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -@keyframes lds-ellipsis3 { - 0% { - transform: scale(1); - } - - 100% { - transform: scale(0); - } -} - -@keyframes lds-ellipsis2 { - 0% { - transform: translate(0, 0); - } - - 100% { - transform: translate(24px, 0); - } -} - - - - - .content-box { @include window-style-modal(); flex-direction: column; diff --git a/src/styles/components/loader.scss b/src/styles/components/loader.scss new file mode 100644 index 0000000..eef86ae --- /dev/null +++ b/src/styles/components/loader.scss @@ -0,0 +1,75 @@ +.loader { + margin: 0 auto; + position: relative; + width: 80px; + height: 20px; + + &.loader-top { + top: 30px; + } + + div { + position: absolute; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--color-menu-background); + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + + &.loader-menu div { + width: 8px; + height: 8px; + background: var(--color-menu-text); + } + + div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; + } + + div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; + } + + div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; + } + + div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; + } +} + +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + + 100% { + transform: scale(1); + } +} + +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0); + } +} + +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + + 100% { + transform: translate(24px, 0); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 1458359..e92bc08 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -6,6 +6,7 @@ @import 'abstracts/fonts'; @import 'abstracts/variables'; @import 'abstracts/mixins'; +@import 'components/loader'; @import 'components/icons/index'; @import 'base/main'; @import 'base/about'; diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 166c9b6..b545c7b 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -102,6 +102,7 @@ data-src=`${endpoints.circles || endpoints.get.circles}joinable/` fields='name, owner, members' + loader-id='loader-admin-circles' class-name='w280 border cell-with-name' class-owner='w280 border cell-with-id-card' diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index 99ef0df..13a9e9a 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/src/views/admin/page-admin-users-edit.pug @@ -13,6 +13,7 @@ div.content-box__info.flex solid-display( bind-resources='' fields='name' + loader-id='loader-users-edit' ) solid-form.form.button-register(