@vuesax-alpha/nightly/theme-chalk/vs-loading.css

A Component Library for Vue 3

.vs-loading{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:inherit;color:rgba(var(--vs-color),1);background:rgba(var(--vs-background),var(--vs-opacity));transition:var(--vs-transition-ease)}.vs-loading.is-has-target{position:absolute}.vs-loading__load{display:flex;justify-content:center;align-items:center;flex-direction:column}.vs-loading__text{font-size:.75em;margin:7px;font-weight:700;color:rgba(var(--vs-color),1)}.vs-loading__load--percent{position:relative;font-size:.65rem;font-weight:700;color:rgba(var(--vs-color),1);margin-top:1px;z-index:200}.vs-loading__animation{display:flex;justify-content:center;align-items:center;width:40px;height:40px;position:relative}.vs-loading__progress{width:100%;position:absolute;top:0;left:0;height:4px;background:rgba(var(--vs-color),.2)}.vs-loading__progress-bar{background:rgba(var(--vs-color),1);height:100%;position:relative;border-radius:0 10px 10px 0}.vs-loading--waves .vs-loading__animation{display:flex;justify-content:center;align-items:center}.vs-loading--waves .vs-loading__animation--item-1{width:0;background:0 0;height:0;position:absolute;animation:waves .7s ease infinite;box-shadow:0 0 10px 0 rgba(var(--vs-color),.5);border-radius:50%}.vs-loading--waves .vs-loading__animation--item-2{width:0;background:0 0;height:0;position:absolute;animation:waves 1.4s linear infinite;box-shadow:0 0 10px 0 rgba(var(--vs-color),.5);border-radius:50%}.vs-loading--waves .vs-loading__animation--item-3{width:0;background:0 0;height:0;position:absolute;animation:waves 1.75s ease infinite;box-shadow:0 0 10px 0 rgba(var(--vs-color),.5);border-radius:50%}.vs-loading--corners .vs-loading__animation{display:flex;justify-content:center;align-items:center}.vs-loading--corners .vs-loading__animation--item-1{width:100%;background:0 0;height:100%;position:absolute;animation:corners 1s ease infinite;border-radius:50%;border:2px solid rgba(var(--vs-color),1)}.vs-loading--corners .vs-loading__animation--item-2{display:none}.vs-loading--corners .vs-loading__animation--item-3{display:none}.vs-loading--border .vs-loading__animation{display:flex;justify-content:center;align-items:center;border-radius:50%}.vs-loading--border .vs-loading__animation--item-1{position:absolute;width:100%;height:100%;border:1px solid rgba(var(--vs-color),1);border-radius:inherit;border-top:1px solid transparent;border-left:1px solid transparent;border-right:1px solid transparent;animation:rotate 1s linear infinite;top:0}.vs-loading--border .vs-loading__animation--item-2{top:0;position:absolute;width:100%;height:100%;border:1px dashed rgba(var(--vs-color),1);border-radius:inherit;border-top:1px solid transparent;border-left:1px solid transparent;border-right:1px solid transparent;animation:rotate 1s linear infinite .2s}.vs-loading--border .vs-loading__animation--item-3{top:0;position:absolute;width:100%;height:100%;border:1px dashed rgba(var(--vs-color),1);border-radius:inherit;animation:rotate 1s linear infinite .4s;opacity:.2}.vs-loading--points .vs-loading__load--percent{position:absolute;top:-10px}.vs-loading--points .vs-loading__animation{display:flex;justify-content:center;align-items:flex-end;width:auto}.vs-loading--points .vs-loading__animation--item-1{width:8px;height:8px;background:rgba(var(--vs-color),1);border-radius:50%;margin:3px;animation:points .75s ease infinite}.vs-loading--points .vs-loading__animation--item-2{width:8px;height:8px;background:rgba(var(--vs-color),1);border-radius:50%;margin:3px;animation:points .75s ease infinite .25s}.vs-loading--points .vs-loading__animation--item-3{width:8px;height:8px;background:rgba(var(--vs-color),1);border-radius:50%;margin:3px;animation:points .75s ease infinite .5s}.vs-loading--square .vs-loading__animation{display:flex;justify-content:center;align-items:center}.vs-loading--square .vs-loading__animation--item-1{position:absolute;width:100%;height:100%;border:2px solid rgba(var(--vs-color),1);border-radius:inherit;animation:rotate-square 4s ease infinite;top:0}.vs-loading--square .vs-loading__animation--item-2{top:0;position:absolute;width:100%;height:100%;border:2px solid rgba(var(--vs-color),1);border-radius:inherit;animation:rotate-square 4s ease infinite reverse;background:rgba(var(--vs-background),1)}.vs-loading--square .vs-loading__animation--item-3{display:none}.vs-loading--gradient .vs-loading__animation{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:999px}.vs-loading--gradient .vs-loading__animation--item-1{position:absolute;width:100%;height:100%;border:0;border-radius:inherit;animation:rotate 1s linear infinite;top:0;background:linear-gradient(0deg,rgba(var(--vs-background),0) 33%,rgba(var(--vs-color),1) 100%)}.vs-loading--gradient .vs-loading__animation--item-2{top:2px;position:absolute;width:calc(100% - 4px);height:calc(100% - 4px);border:0;border-radius:inherit;background:rgba(var(--vs-background),1)}.vs-loading--gradient .vs-loading__animation--item-3{display:none}.vs-loading--rectangle .vs-loading__load--percent{position:absolute;bottom:-2px}.vs-loading--rectangle .vs-loading__animation{display:flex;justify-content:center;align-items:flex-end}.vs-loading--rectangle .vs-loading__animation--item-1{position:absolute;width:15px;height:15px;border:0;border-radius:inherit;animation:rectangle 1s ease infinite;background:rgba(var(--vs-color),1)}.vs-loading--rectangle .vs-loading__animation--item-2{position:absolute;width:15px;height:15px;border:0;border-radius:inherit;animation:rectangle 1s ease-out infinite;background:rgba(var(--vs-color),.2)}.vs-loading--rectangle .vs-loading__animation--item-3{display:none}.vs-loading--circles .vs-loading__animation{display:flex;justify-content:center;align-items:center;width:60px;height:60px}.vs-loading--circles .vs-loading__animation--item-1{position:absolute;width:40px;height:40px;animation:rotate 1s ease infinite;border-radius:50%;border:2px solid rgba(var(--vs-color),1);border-top:3px solid transparent;border-left:3px solid transparent;border-right:3px solid transparent}.vs-loading--circles .vs-loading__animation--item-2{position:absolute;width:50px;height:50px;animation:rotate 1s ease-in-out infinite;border-radius:50%;border:2px dashed rgba(var(--vs-color),1);border-top:3px solid transparent;border-left:3px solid transparent;border-right:3px solid transparent}.vs-loading--circles .vs-loading__animation--item-3{position:absolute;width:60px;height:60px;animation:rotate 1s linear infinite reverse;border-radius:50%;border:2px solid rgba(var(--vs-color),1);border-top:3px solid transparent;border-left:3px solid transparent;border-right:3px solid transparent}.vs-loading--square-rotate .vs-loading__load--percent{position:absolute;bottom:30px}.vs-loading--square-rotate .vs-loading__animation{display:flex;justify-content:center;align-items:flex-end;width:60px;height:60px}.vs-loading--square-rotate .vs-loading__animation--item-1{position:absolute;width:25px;height:25px;animation:square-rotate 3s ease infinite;background:rgba(var(--vs-color),1)}.vs-loading--square-rotate .vs-loading__animation--item-2{display:none}.vs-loading--square-rotate .vs-loading__animation--item-3{display:none}.vs-loading--scale .vs-loading__load--percent{position:absolute;bottom:40px}.vs-loading--scale .vs-loading__animation{display:flex;justify-content:center;align-items:center;width:40px;height:40px}.vs-loading--scale .vs-loading__animation--item-1{position:relative;width:5px;height:5px;background:rgba(var(--vs-color),1);margin:3px;animation:scale .8s ease infinite;border-radius:5px}.vs-loading--scale .vs-loading__animation--item-2{position:relative;width:5px;height:5px;background:rgba(var(--vs-color),1);margin:3px;animation:scale .8s ease infinite .2s;border-radius:5px}.vs-loading--scale .vs-loading__animation--item-3{position:relative;width:5px;height:5px;background:rgba(var(--vs-color),1);margin:3px;animation:scale .8s ease infinite .4s;border-radius:5px}.vs-loading--atom .vs-loading__animation{display:flex;justify-content:center;align-items:center;width:40px;height:40px;position:relative}.vs-loading--atom .vs-loading__animation--item{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.vs-loading--atom .vs-loading__animation--item-1{left:0;top:0;animation:rotate-atom-one 1s linear infinite;border-bottom:3px solid rgba(var(--vs-color),1)}.vs-loading--atom .vs-loading__animation--item-2{right:0;top:0;animation:rotate-atom-two 1s linear infinite;border-right:3px solid rgba(var(--vs-color),1)}.vs-loading--atom .vs-loading__animation--item-3{right:0;bottom:0;animation:rotate-atom-three 1s linear infinite;border-top:3px solid rgba(var(--vs-color),1)}.vs-loading--ball .vs-loading__animation{width:120px;height:40px;position:relative}.vs-loading--ball .vs-loading__animation--item{width:14px;height:14px;position:absolute;border-radius:9999px;left:15%;overflow:hidden;transform-origin:50%;animation:ball-circle .23s alternate infinite ease;background:radial-gradient(circle at 40% 38%,rgba(var(--vs-color),.06) 8%,rgba(var(--vs-color),1) 50%,rgba(var(--vs-color),1) 80%,rgba(var(--vs-color),1) 100%)}.vs-loading--ball .vs-loading__animation--item-2{left:44%;animation-delay:90ms}.vs-loading--ball .vs-loading__animation--item-3{left:auto;right:15%;animation-delay:.2s}.vs-loading--ball .vs-loading__animation--shadow{width:13px;height:4px;border-radius:50%;background-color:rgba(0,0,0,.12);position:absolute;top:32px;transform-origin:50%;z-index:-1;left:15%;filter:blur(1px);animation:ball-shadow .23s alternate infinite ease}.vs-loading--ball .vs-loading__animation--shadow-2{left:44%;animation-delay:90ms}.vs-loading--ball .vs-loading__animation--shadow-3{left:auto;right:15%;animation-delay:.2s}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes waves{0%{width:0;height:0}100%{height:50px;width:50px;opacity:0}}@keyframes corners{0%{border-radius:50%;transform:rotate(0)}25%{border-radius:50% 50% 50% 15%}50%{border-radius:50% 50% 15% 30%}75%{border-radius:50% 15% 30% 30%}100%{border-radius:50%;transform:rotate(-180deg)}}@keyframes points{0%{transform:translate(0,0)}50%{transform:translate(0,-15px)}100%{transform:translate(0,0)}}@keyframes rotate-square{0%{transform:rotate(0)}50%{transform:rotate(360deg)}100%{transform:rotate(0)}}@keyframes rectangle{0%{transform:translate(-50px)}50%{transform:translate(50px)}100%{transform:translate(-50px)}}@keyframes square-rotate{0%{transform:rotateX(0) rotateY(0)}25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}100%{transform:rotateX(0) rotateY(0)}}@keyframes scale{0%{height:5px}50%{height:25px}0%{height:5px}}@keyframes rotate-atom-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-atom-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-atom-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@keyframes ball-circle{0%{top:30px;height:5px;border-radius:50px 50px 25px 25px;transform:scaleX(1.7)}40%{height:14px;border-radius:50%}100%{top:0}}@keyframes ball-shadow{0%{transform:scaleX(1.5)}40%{transform:scaleX(1);opacity:.7}100%{transform:scaleX(.2);opacity:.4}}