pro-design-vue/theme-chalk/pro-spinner.css

A Component Library for Vue 3

.pro-spinner{align-items:center;animation-duration:.5s;background-color:hsl(var(--pro-overlay-content));display:flex;justify-content:center;left:0;position:absolute;right:0;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:100}.pro-spinner--hidden{opacity:0;visibility:hidden}.pro-spinner-loader{height:48px;position:relative;width:48px}.pro-spinner-loader:before{animation:loader-shadow-ani .5s linear infinite;background-color:hsl(var(--pro-primary)/50%);border-radius:50%;content:" ";height:5px;left:0;position:absolute;top:60px;width:48px}.pro-spinner-loader:after{animation:loader-jump-ani .5s linear infinite;background-color:hsl(var(--pro-primary));border-radius:4px;content:" ";height:100%;left:0;position:absolute;top:0;width:100%}.pro-spinner-loader--paused:after,.pro-spinner-loader--paused:before{animation-play-state:paused!important}@keyframes loader-jump-ani{15%{border-bottom-right-radius:3px}25%{transform:translateY(9px) rotate(22.5deg)}50%{border-bottom-right-radius:40px;transform:translateY(18px) scaleY(.9) rotate(45deg)}75%{transform:translateY(9px) rotate(67.5deg)}to{transform:translateY(0) rotate(90deg)}}@keyframes loader-shadow-ani{0%,to{transform:scale(1)}50%{transform:scaleX(1.2)}}