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

A simple, customizable skeleton loader for your vue app

@keyframes fade-in{0%{opacity:.5}to{opacity:1}}@keyframes wave-move{0%{transform:translate(0)}to{transform:translate(200%)}}:root{--sk-primary-color: #ced4da;--sk-secondary-color: #ffffffa9;--sk-bk-color: #fff}.sk-loader--dark{--sk-primary-color: #ced4da;--sk-secondary-color: #ffffffa9;--sk-bk-color: #3f3f3f;background-color:var(--sk-bk-color)}.sk-loader.skeleton{display:flex;gap:12px;width:100%}.sk-loader.skeleton .element{position:relative;background:var(--sk-primary-color);margin-block-end:8px;overflow:hidden}.sk-loader.skeleton .element.fade-in{animation:fade-in .8s ease-in-out backwards infinite alternate}.sk-loader.skeleton .element.wave:after{content:"";position:absolute;bottom:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,var(--sk-secondary-color) 50%,transparent 100%);animation:wave-move 1.5s infinite linear}.sk-loader.container{padding:20px}.sk-loader.card[data-v-16ff31bf]{display:flex;flex-direction:column;justify-content:space-between;border-radius:5px;padding:15px;width:350px;height:220px;border:1px solid var(--sk-primary-color)}.sk-loader.user[data-v-1ae1a6b7]{display:flex;justify-content:space-between;border-radius:5px;padding:15px;border:1px solid var(--sk-primary-color)}.sk-loader.user .avatar[data-v-1ae1a6b7]{flex:0}.sk-loader.user .text[data-v-1ae1a6b7]{flex:1;display:flex;flex-direction:column;padding:10px;justify-content:center;align-items:center}