react-pulsable/dist/index.css

This is a simple and customizable react component library to add a pulsing/skeleton loading effect to your existing component.

.pulsable-cont.pulsable-base{outline:none!important;opacity:0!important}.pulsable-cont.pl-css{-webkit-user-select:none;-ms-user-select:none;pointer-events:none!important;user-select:none}.pulsable-cont.pl-css *{transition:none!important}.pulsable-cont.pl-css .pl-animate-none{-webkit-animation:none;animation:none}@-webkit-keyframes wave-lines{0%{background-position:-358px 0}to{background-position:438px 0}}@keyframes wave-lines{0%{background-position:-358px 0}to{background-position:438px 0}}@-webkit-keyframes wave-lines-r{0%{background-position:358px 0}to{background-position:-438px 0}}@keyframes wave-lines-r{0%{background-position:358px 0}to{background-position:-438px 0}}.pulsable-cont.pl-css .pl-animate-none{background:var(--color-transparent-medium, rgba(130, 130, 130, .2))}@-webkit-keyframes pl-pulse{50%{opacity:.5}}@keyframes pl-pulse{50%{opacity:.5}}.pulsable-cont.pl-css .pl-animate{-webkit-animation:pl-pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pl-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.pulsable-cont.pl-css .pl-animate{background:var(--color-transparent-light, rgba(130, 130, 130, .2))}.pulsable-cont.pl-css .pl-animate-wave{background:var(--color-transparent-light, rgba(130, 130, 130, .2));background:linear-gradient(to right,var(--color-transparent-light, rgba(130, 130, 130, .2)) 8%,var(--color-transparent-medium, rgba(130, 130, 130, .3)) 18%,var(--color-transparent-light, rgba(130, 130, 130, .2)) 33%);background-size:800px 100px;-webkit-animation:wave-lines 2s infinite ease-out;animation:wave-lines 2s infinite ease-out}.pulsable-cont.pl-css .pl-animate-wave-r{background:var(--color-transparent-light, rgba(130, 130, 130, .2));background:linear-gradient(to left,var(--color-transparent-light, rgba(130, 130, 130, .2)) 8%,var(--color-transparent-medium, rgba(130, 130, 130, .3)) 18%,var(--color-transparent-light, rgba(130, 130, 130, .2)) 33%);background-size:800px 100px;-webkit-animation:wave-lines-r 2s infinite ease-in-out;animation:wave-lines-r 2s infinite ease-in-out}.pulsable-cont.pl-css .pl-svg-cont{position:absolute!important;z-index:1!important;width:100%!important;height:100%!important;top:0!important;left:0!important;opacity:.7}.pulsable-cont.pl-css .pl-svg-cont svg{position:absolute!important;-webkit-transform:translate(-50%,-50%)!important;transform:translate(-50%,-50%)!important;left:50%!important;top:50%!important}.pulsable-cont.pl-css .pl-child{position:absolute!important;z-index:1!important;width:100%!important}.pulsable-cont.pl-css .pl-no-rounded{border-radius:0!important}.pulsable-cont.pl-css .pl-element{outline:none!important;color:transparent!important;border-color:transparent!important;box-shadow:none!important;background:transparent!important;position:relative!important;background-color:transparent!important}.pulsable-cont.pl-css .pl-child-element{outline:none!important;opacity:0!important}.pulsable-cont.pl-css .pl-child-rect{height:70%!important;top:15%!important;left:0!important;border-radius:5px}.pulsable-cont.pl-css .pl-child-para-cont{background-color:transparent!important;height:100%!important;top:0%!important;left:0!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important}.pulsable-cont.pl-css .pl-child-para{border-radius:5px}.pulsable-cont.pl-css .pl-child-rect-full{height:100%!important;top:0%!important;left:0!important;border-radius:5px}.pulsable-cont.pl-css .pl-child-circle{width:90%!important;height:90%!important;top:5%!important;left:5%!important;border-radius:100%!important}.pulsable-cont.pl-css .pl-child-hidden{opacity:0!important}