:root{--size: 48px;--arrow-width: calc(var(--size) / 30);--arrow-height: calc(var(--size) / 3)}.upload{width:var(--size);height:var(--size);border-radius:50%;position:relative;border:2px solid rgba(65,154,254,.56);cursor:pointer;transform:translateZ(0);transition:transform .2s ease}.upload .path{position:absolute;top:50%;z-index:1;margin:-36px 0 0;width:72px;height:72px}.upload .path .arrow{margin-left:calc(var(--arrow-width) / -2);bottom:calc(var(--size) / 2);width:var(--arrow-width);height:var(--arrow-height);position:absolute;left:50%;border-radius:1px;transform-origin:50% 100%}.upload .path .arrow:before,.upload .path .arrow:after{content:"";display:block;width:2px;height:14px;bottom:-2px;background:#419AFE;position:absolute;border-radius:1px;transform-origin:50% 100%}.upload .path .arrow:before{right:50%;transform:rotate(-44deg) translate(2px)}.upload .path .arrow:after{left:50%;transform:rotate(44deg) translate(-2px)}.upload .path svg{width:52px;height:52px;margin:10px auto;display:block;fill:none;stroke:#419afe;stroke-width:2px;stroke-linecap:round;stroke-dashoffset:592.73;stroke-dasharray:0 592.73 20 592.73}.upload .circle{position:absolute;width:calc(var(--size) * .88);height:calc(var(--size) * .88);margin-left:calc(var(--size) * -.44);margin-top:calc(var(--size) * -.44);border-radius:50%;left:50%;top:50%;overflow:hidden}.upload .circle .water{transform:translateY(116%);background:rgba(65,154,254,.56);position:absolute;left:0;top:0;width:100%;height:100%}.upload .circle .water svg{display:block;width:116px;height:6px;position:absolute;bottom:100%}.upload .circle .water svg:nth-child(1){right:0;fill:#308ffa;animation:forward 1.65s infinite}.upload .circle .water svg:nth-child(2){left:0;fill:#419afe8f;margin-bottom:-1px;animation:backward .825s infinite linear}.upload.loading .path{animation:movePath .4s linear forwards}.upload.loading .path .arrow{animation:arrow .5s linear forwards 3.7s}.upload.loading .path .arrow:before{animation:arrowB .4s linear forwards,arrowBCheck .5s linear forwards 3.7s}.upload.loading .path .arrow:after{animation:arrowA .4s linear forwards,arrowACheck .5s linear forwards 3.7s}.upload.loading .path svg{animation:load 3s linear forwards .45s,reset .7s linear forwards 3.7s}.upload.loading .circle .water{animation:fill 3s linear forwards .45s}.upload:active{transform:scale(.92) translateZ(0)}@keyframes load{0%{stroke-dashoffset:592.73;stroke-dasharray:0 592.73 20 592.73}42%{stroke-dasharray:0 592.73 80 592.73}85%{stroke-dashoffset:80;stroke-dasharray:0 592.73 32 592.73}to{stroke-dashoffset:32;stroke-dasharray:0 592.73 32 592.73}}@keyframes reset{0%,99%{opacity:0}to{opacity:1}}@keyframes movePath{70%{transform:translateY(-10px)}}@keyframes arrow{0%{background:#419AFE;transform:rotate(34deg) translate(-2.5px,2px)}40%{transform:rotate(-7deg) translate(0)}99%{transform:rotate(0) translate(0)}to{background:#419AFE}}@keyframes arrowBCheck{0%,20%{transform:rotate(-86deg) translate(2px) translateY(1px) scaleY(.714);opacity:1}to{transform:rotate(-44deg) translate(2px) scaleY(1) translateY(0);opacity:1}}@keyframes arrowACheck{0%{transform:rotate(0) translate(-1px,-1px);opacity:1}40%{transform:rotate(60deg) translate(-2px,1px);opacity:1}to{transform:rotate(44deg) translate(-2px);opacity:1}}@keyframes arrowB{0%{transform:rotate(-44deg) translate(2px)}60%{transform:rotate(-60deg) translate(2px)}99%{transform:rotate(0) translate(1px);opacity:1}to{transform:rotate(0) translate(1px);opacity:0}}@keyframes arrowA{0%{transform:rotate(44deg) translate(-2px)}60%{transform:rotate(60deg) translate(-2px)}99%{transform:rotate(0) translate(-1px);opacity:1}to{transform:rotate(0) translate(-1px);opacity:0}}@keyframes fill{0%{transform:translateY(116%)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(0)}}@keyframes backward{to{transform:translate(-50%)}}@keyframes forward{to{transform:translate(50%)}}html{box-sizing:border-box;-webkit-font-smoothing:antialiased}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit}