.container{--uib-size:40px;--uib-color:white;--uib-speed:1s;--uib-stroke:3px;position:relative;display:flex;align-items:center;justify-content:flex-start;height:16px;width:16px}.line{position:absolute;top:0;left:calc(50% - var(--uib-stroke) / 2);display:flex;align-items:flex-start;height:100%;width:var(--uib-stroke)}.line:before{content:"";height:22%;width:100%;border-radius:calc(var(--uib-stroke) / 2);background-color:var(--uib-color);animation:pulse calc(var(--uib-speed)) ease-in-out infinite;transition:background-color .3s ease;transform-origin:center bottom}.line:first-child{transform:rotate(calc(1turn / -12 * 1));&:before{animation-delay:calc(var(--uib-speed) / -12 * 1)}}.line:nth-child(2){transform:rotate(calc(1turn / -12 * 2));&:before{animation-delay:calc(var(--uib-speed) / -12 * 2)}}.line:nth-child(3){transform:rotate(calc(1turn / -12 * 3));&:before{animation-delay:calc(var(--uib-speed) / -12 * 3)}}.line:nth-child(4){transform:rotate(calc(1turn / -12 * 4));&:before{animation-delay:calc(var(--uib-speed) / -12 * 4)}}.line:nth-child(5){transform:rotate(calc(1turn / -12 * 5));&:before{animation-delay:calc(var(--uib-speed) / -12 * 5)}}.line:nth-child(6){transform:rotate(calc(1turn / -12 * 6));&:before{animation-delay:calc(var(--uib-speed) / -12 * 6)}}.line:nth-child(7){transform:rotate(calc(1turn / -12 * 7));&:before{animation-delay:calc(var(--uib-speed) / -12 * 7)}}.line:nth-child(8){transform:rotate(calc(1turn / -12 * 8));&:before{animation-delay:calc(var(--uib-speed) / -12 * 8)}}.line:nth-child(9){transform:rotate(calc(1turn / -12 * 9));&:before{animation-delay:calc(var(--uib-speed) / -12 * 9)}}.line:nth-child(10){transform:rotate(calc(1turn / -12 * 10));&:before{animation-delay:calc(var(--uib-speed) / -12 * 10)}}.line:nth-child(11){transform:rotate(calc(1turn / -12 * 11));&:before{animation-delay:calc(var(--uib-speed) / -12 * 11)}}@keyframes pulse{0%,80%,to{transform:scaleY(.75);opacity:0}20%{transform:scaleY(1);opacity:1}}