fine-true/lib/loading/index.css

A small and beautiful Vue3 version of the UI Library

@keyframes fineRotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes fineSpinMove{0%{opacity:.3}to{opacity:1}}@keyframes fineCircular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}to{stroke-dasharray:90,150;stroke-dashoffset:-120}}.fine-loading-nested{position:relative}.find-gloab-loading,.find-loading-nested-inline{left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.find-gloab-loading{position:fixed;z-index:var(--fine-loading-mask-zindex)}.find-loading-nested-inline{position:absolute;background-color:rgba(255,255,255,.5)}.fine-loading{display:inline-block;font-size:var(--fine-loading-icon-color);color:var(--fine-loading-icon-color)}.fine-loading span{display:inline-block;vertical-align:middle}.fine-loading-icon,.fine-spin-spot{position:relative}.fine-spin-spot{animation:fineRotate 1.2s infinite linear;display:inline-block;width:1.5em;height:1.5em}.fine-spin-spot-item{position:absolute;display:block;width:.6em;height:.6em;background-color:var(--fine-blue);border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:fineSpinMove 1s infinite linear alternate}.fine-spin-spot-item:nth-child(1){top:0;left:0}.fine-spin-spot-item:nth-child(2){top:0;right:0;animation-delay:.4s}.fine-spin-spot-item:nth-child(3){right:0;bottom:0;animation-delay:.8s}.fine-spin-spot-item:nth-child(4){bottom:0;left:0;animation-delay:1.2s}.fine-loading-spiner{position:relative;display:inline-block;max-width:100%;max-height:100%;width:1.5em;height:1.5em;vertical-align:middle;animation:fineRotate .8s linear infinite;animation-duration:2s}.fine-loading__circular{display:block;width:100%;height:100%}.fine-loading__circular circle{animation:fineCircular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.fine-loading-vertical{display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.fine-loading-vertical .fine-loading-message{margin-top:8px;margin-left:0}.fine-loading-message{margin-left:8px;color:inherit}