*{box-sizing:border-box}html,body{background-color:#00e640;color:#fafafa;font-family:Gloria Hallelujah,cursive;height:100vh;width:100vw}input{margin-top:50px}#app{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.loader{--ink-height: 1.35em;--ink-offset: .64em;display:inline-block;position:relative;height:var(--ink-height);font-size:54px;line-height:1;width:250px;text-align:center}.loader:after,.loader:before{content:attr(data-load);position:absolute;left:0;top:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding-bottom:var(--ink-offset);line-height:1}.loader:before{opacity:.1}.loader:after{color:#fff;opacity:1;clip-path:inset(calc(100% - (var(--progress, 0) * 1%)) 0 0 0)}.loader--mocked:after{animation-name:load;animation-duration:3s;animation-fill-mode:forwards;animation-iteration-count:infinite}@keyframes load{0%{clip-path:inset(100% 0 0 0)}12.5%{clip-path:inset(89% 0 0 0)}25%{clip-path:inset(76% 0 0 0)}37.5%{clip-path:inset(73% 0 0 0)}50%{clip-path:inset(66% 0 0 0)}62.5%{clip-path:inset(60% 0 0 0)}75%{clip-path:inset(53% 0 0 0)}87.5%{clip-path:inset(38% 0 0 0)}to{clip-path:inset(0% 0 0 0)}}