.loading-swaps-quotes { display: flex; flex-flow: column; align-items: center; flex: 1; width: 100%; &__content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 445px; } &__quote-counter { @include H7; color: var(--color-text-alternative); margin-top: 3px; display: flex; justify-content: center; width: 100%; margin-bottom: 4px; } &__quote-name-check { @include H4; font-weight: bold; color: var(--color-text-default); display: flex; justify-content: center; width: 100%; text-transform: capitalize; } &__background-1, &__background-2 { width: 265.18px; height: 221.02px; display: flex; justify-content: center; align-items: center; position: absolute; -webkit-animation: spin 38s linear infinite; -moz-animation: spin 38s linear infinite; animation: spin 38s linear infinite; @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } } &__background-2 { width: 182.8px; height: 195.39px; -webkit-animation: spin 42s linear infinite; -moz-animation: spin 42s linear infinite; animation: spin 42s linear infinite; } &__mascot-container { position: absolute; } &__animation { display: flex; justify-content: center; align-items: center; position: relative; height: 60%; width: 316px; } &__loading-bar-container { width: 248px; height: 3px; background: var(--color-background-alternative); display: flex; margin-top: 16px; } &__loading-bar { height: 3px; background: var(--color-primary-default); -webkit-transition: width 0.5s linear; -moz-transition: width 0.5s linear; -o-transition: width 0.5s linear; transition: width 0.5s linear; } }