.dots-bars-1,.dots-bars-2{height:40px;--r1:radial-gradient(farthest-side at bottom,currentColor 93%,#0000);--r2:radial-gradient(farthest-side at top   ,currentColor 93%,#0000);--c:linear-gradient(currentColor 0 0)}.dots-bars-1,.dots-bars-2,.dots-bars-3{--c:linear-gradient(currentColor 0 0)}.dots-bars-3:before,.dots-bars-4:before{content:"";position:absolute;width:8px;background:currentColor;left:0}.dots-bars-3,.dots-bars-4,.dots-bars-5{position:relative;width:40px}.dots-bars-1{width:40px;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat;animation:1s infinite alternate db1}@keyframes db1{0%,10%{background-size:8px 0,8px 4px,8px 4px;background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px)}100%,90%{background-size:8px 100%,8px 4px,8px 4px;background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px)}}.dots-bars-2{width:40px;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat;animation:1s infinite alternate db2}@keyframes db2{0%,25%{background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px)}50%{background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;background-position:0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px)}75%{background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;background-position:0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px)}100%,95%{background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;background-position:0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px)}}.dots-bars-3{height:26px;background:var(--c) 0 100%,var(--c) 50% 100%,var(--c) 100% 100%;background-size:8px calc(100% - 4px);background-repeat:no-repeat}.dots-bars-3:before{height:8px;border-radius:50%;top:0;animation:1.5s linear infinite alternate db3-1,.75s cubic-bezier(0,200,.8,200) infinite db3-2}@keyframes db3-1{100%{left:calc(100% - 8px)}}@keyframes db3-2{100%{top:-.1px}}.dots-bars-4{height:20px;--c:radial-gradient(farthest-side,currentColor 93%,#0000);background:var(--c) 0 0,var(--c) 50% 0,var(--c) 100% 0;background-size:8px 8px;background-repeat:no-repeat;animation:1s linear infinite alternate db4-0}.dots-bars-4:before{height:12px;top:0;animation:1s linear infinite alternate db4-1,.5s cubic-bezier(0,200,.8,200) infinite db4-2}.dots-bars-5:before,.dots-bars-6:before{left:-16px;top:0;content:"";position:absolute;width:8px;background:currentColor}@keyframes db4-0{0%{background-position:0 100%,50% 0,100% 0}42%,58%,8%,92%{background-position:0 0,50% 0,100% 0}50%{background-position:0 0,50% 100%,100% 0}100%{background-position:0 0,50% 0,100% 100%}}@keyframes db4-1{100%{left:calc(100% - 8px)}}@keyframes db4-2{100%{top:-.1px}}.dots-bars-5{height:30px;--c:linear-gradient(currentColor 0 0);background:var(--c) 0 100%/8px 30px,var(--c) 50% 100%/8px 20px,var(--c) 100% 100%/8px 10px;background-repeat:no-repeat;clip-path:inset(-100% 0)}.dots-bars-5:before{height:8px;border-radius:50%;animation:2s linear infinite db5-1,.5s cubic-bezier(0,200,.8,200) infinite db5-2}@keyframes db5-1{0%{left:-16px;transform:translateY(-8px)}100%{left:calc(100% + 8px);transform:translateY(22px)}}@keyframes db5-2{100%{top:-.1px}}.dots-bars-6{width:40px;height:20px;--c:radial-gradient(farthest-side,currentColor 93%,#0000);background:var(--c) 0 0,var(--c) 50% 0;background-size:8px 8px;background-repeat:no-repeat;position:relative;clip-path:inset(-200% -100% 0 0);animation:1.5s linear infinite db6-0}.dots-bars-7,.dots-bars-8,.dots-bars-9{width:40px;height:40px;--c:linear-gradient(currentColor 0 0);overflow:hidden;position:relative}.dots-bars-6:before{height:12px;animation:1.5s linear infinite db6-1,.5s cubic-bezier(0,200,.8,200) infinite db6-2}.dots-bars-6:after{content:"";position:absolute;inset:0 0 auto auto;width:8px;height:8px;border-radius:50%;background:currentColor;animation:1.5s linear infinite db6-3}.dots-bars-7:before,.dots-bars-8:before{animation:inherit;top:calc(50% - 4px);left:-8px;height:8px;border-radius:50%;content:"";position:absolute;width:8px;background:currentColor}@keyframes db6-0{0%,100%,30%,41%,63%,74%{background-position:0 0,50% 0}33%{background-position:0 100%,50% 0}66%{background-position:0 0,50% 100%}}@keyframes db6-1{90%{transform:translateY(0)}95%{transform:translateY(15px)}100%{transform:translateY(15px);left:calc(100% - 8px)}}@keyframes db6-2{100%{top:-.1px}}@keyframes db6-3{0%,100%,80%{transform:translate(0)}90%{transform:translate(26px)}}.dots-bars-7{background:var(--c) 0 0,var(--c) 0 100%,var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 0,var(--c) 100% 100%;background-size:8px 50%;background-repeat:no-repeat;animation:1s infinite db7-0}.dots-bars-7:before{animation-name:db7-1}@keyframes db7-0{16.67%{background-size:8px 30%,8px 30%,8px 50%,8px 50%,8px 50%,8px 50%}33.33%{background-size:8px 30%,8px 30%,8px 30%,8px 30%,8px 50%,8px 50%}50%{background-size:8px 30%,8px 30%,8px 30%,8px 30%,8px 30%,8px 30%}66.67%{background-size:8px 50%,8px 50%,8px 30%,8px 30%,8px 30%,8px 30%}83.33%{background-size:8px 50%,8px 50%,8px 50%,8px 50%,8px 30%,8px 30%}}@keyframes db7-1{20%{left:0}40%{left:calc(50% - 4px)}60%{left:calc(100% - 8px)}100%,80%{left:100%}}.dots-bars-8{background:var(--c) 0 0,var(--c) 0 100%,var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 0,var(--c) 100% 100%;background-size:8px 50%;background-repeat:no-repeat;animation:2s infinite db8-0}.dots-bars-8:before{animation-name:db8-1}@keyframes db8-0{16.67%{background-size:8px 30%,8px 30%,8px 50%,8px 50%,8px 50%,8px 50%}33.33%,50%{background-size:8px 30%,8px 30%,8px 30%,8px 30%,8px 50%,8px 50%}66.67%{background-size:8px 50%,8px 50%,8px 30%,8px 30%,8px 50%,8px 50%}83.33%{background-size:8px 50%,8px 50%,8px 50%,8px 50%,8px 50%,8px 50%}}@keyframes db8-1{20%{left:0}100%,40%{left:calc(50% - 4px)}}.dots-bars-9{background:var(--c) 0 0,var(--c) 0 100%,var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 0,var(--c) 100% 100%;background-size:8px 50%;background-repeat:no-repeat;animation:2s infinite db9-0}.dots-bars-9:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:currentColor;top:calc(50% - 4px);left:-8px;animation:inherit;animation-name:db9-1}@keyframes db9-0{16.67%{background-size:8px 30%,8px 30%,8px 50%,8px 50%,8px 50%,8px 50%}33.33%,50%{background-size:8px 30%,8px 30%,8px 30%,8px 30%,8px 50%,8px 50%}66.67%{background-size:8px 50%,8px 50%,8px 30%,8px 30%,8px 50%,8px 50%}83.33%{background-size:8px 50%,8px 50%,8px 50%,8px 50%,8px 50%,8px 50%}}@keyframes db9-1{20%{left:0}40%,70%{left:calc(50% - 4px)}80%,85%{left:8px;top:calc(50% - 4px)}100%{left:8px;top:-8px}}.dots-bars-10{width:70px;height:30px;overflow:hidden;position:relative}.dots-bars-10::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;inset:0;margin:auto;background:currentColor;transform-origin:bottom;animation:3s infinite db10-1}.dots-bars-10::after{content:"";position:absolute;width:8px;height:14px;bottom:calc(50% - 4px);background:currentColor;animation:3s infinite db10-2}@keyframes db10-1{0%,10%{transform:translate(0) scale(1);box-shadow:60px 0,60px 0}20%,40%{transform:translate(20px) scale(1);box-shadow:60px 0,60px 0}48%{transform:translate(20px) scale(1);box-shadow:8px 0,60px 0}50%{transform:translate(20px) scale(1.5);box-shadow:0 0,60px 0}58%{transform:translate(20px) scale(1.5);box-shadow:0 0,8px 0}60%,70%{transform:translate(20px) scale(2);box-shadow:0 0,0 0}85%{transform:translate(-50px) scale(2);box-shadow:0 0,0 0}87%{transform:translate(-50px) scale(1);box-shadow:0 0,0 0}100%{transform:translate(0) scale(1);box-shadow:0 0,0 0}}@keyframes db10-2{20%,70%{left:50%}0%,10%,100%,85%{left:-25px}}