UNPKG

@shopware-ag/meteor-component-library

Version:

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

55 lines (53 loc) 1.11 kB
.mt-loader[data-v-e2f239e2] { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 400; background: var(--color-background-tertiary-default); opacity: 0.8; } .mt-loader-element { & div { &[data-v-e2f239e2] { position: absolute; width: 100%; height: 100%; border-width: 4px; border-style: solid; border-radius: 50%; border-color: var(--color-border-brand-default) transparent transparent transparent; animation: mt-loader-rotator-e2f239e2 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite; } &[data-v-e2f239e2]:nth-child(1) { animation-delay: -0.45s; } &[data-v-e2f239e2]:nth-child(2) { animation-delay: -0.3s; } &[data-v-e2f239e2]:nth-child(3) { animation-delay: -0.15s; } } } .mt-loader__container[data-v-e2f239e2] { display: grid; grid-auto-columns: auto; text-align: center; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes mt-loader-rotator-e2f239e2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }