vue-skeleton-content-loader/dist/style.css

Make beautiful, animated loading skeletons that automatically adapt to your Vue apps

.skeleton-loader[data-v-868ce80e]{--base-color: rgb(239, 241, 246);--light-mode-color: rgba(255, 255, 255, .6);--light-mode-color-to: rgba(255, 255, 255, 0);--dark-mode-color: rgba(0, 0, 0, .2);--dark-mode-color-to: transparent;--animation-duration: 2s;--background-image-light-mode: linear-gradient( 90deg, var(--light-mode-color-to), var(--light-mode-color), var(--light-mode-color-to) );--background-image-dark-mode: linear-gradient( 90deg, var(--dark-mode-color-to), var(--dark-mode-color), var(--dark-mode-color-to) );box-sizing:border-box;overflow:hidden;position:relative;background:var(--base-color) no-repeat;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.skeleton-loader[data-v-868ce80e]:after,.skeleton-loader[data-v-868ce80e]:before{box-sizing:border-box}.skeleton-loader.circle[data-v-868ce80e]{width:40px;height:40px;margin:5px;border-radius:50%}.skeleton-loader.square[data-v-868ce80e]{width:40px;height:40px;margin:5px}.skeleton-loader.progress[data-v-868ce80e],.skeleton-loader.progress-dark[data-v-868ce80e]{transform:translateZ(0)}.skeleton-loader.progress[data-v-868ce80e]:after,.skeleton-loader.progress[data-v-868ce80e]:before,.skeleton-loader.progress-dark[data-v-868ce80e]:after,.skeleton-loader.progress-dark[data-v-868ce80e]:before{box-sizing:border-box}.skeleton-loader.progress[data-v-868ce80e]:before,.skeleton-loader.progress-dark[data-v-868ce80e]:before{animation:progress-868ce80e var(--animation-duration) ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:""}.skeleton-loader.progress[data-v-868ce80e]:before{background-image:var(--background-image-light-mode)}.skeleton-loader.progress-dark[data-v-868ce80e]:before{background-image:var(--background-image-dark-mode)}.skeleton-loader.pulse[data-v-868ce80e]{animation:pulse-868ce80e var(--animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.pulse-dark[data-v-868ce80e]{background:var(--dark-mode-color);animation:pulse-868ce80e var(--animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.custom-content[data-v-868ce80e]{height:100%;background:none}@media (prefers-reduced-motion: reduce){.skeleton-loader.pulse[data-v-868ce80e],.skeleton-loader.pulse-dark[data-v-868ce80e],.skeleton-loader.progress-dark[data-v-868ce80e],.skeleton-loader.custom-content[data-v-868ce80e],.skeleton-loader.custom-content[data-v-868ce80e]:before,.skeleton-loader.custom-content[data-v-868ce80e]:after,.skeleton-loader.progress[data-v-868ce80e]:before{animation:none}.skeleton-loader.progress[data-v-868ce80e]:before,.skeleton-loader.custom-content[data-v-868ce80e]:before,.skeleton-loader.custom-content[data-v-868ce80e]:after,.skeleton-loader.progress-dark[data-v-868ce80e],.skeleton-loader.pulse-dark[data-v-868ce80e],.skeleton-loader.custom-content[data-v-868ce80e]{background-image:none}}@media screen and (min-device-width: 1200px){.skeleton-loader[data-v-868ce80e]{-webkit-user-select:none;user-select:none;cursor:wait}}@keyframes progress-868ce80e{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse-868ce80e{0%{opacity:1}50%{opacity:.4}to{opacity:1}}