.loader-box{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.loader{text-align:center;vertical-align:middle;position:relative;display:flex;padding:0 0 10px 0;width:150px;margin:0 auto}h1.loading{font-size:1rem;text-align:center}h1.error{font-size:1rem;text-align:center;display:none;margin-bottom:20px;font-weight:normal;line-height:1.5rem}h1.loading span::before{content:'Gathering the Tweets...';animation:profile 10s infinite}#refresh_thread h1.loading span::before{color:#fff}@keyframes profile{25%{content:'Gathering the Tweets...'}50%{content:'Bot is working on this...'}75%{content:'The thread will be ready soon... '}100%{content:'It will be worth the wait... '}}.loader span{display:block;width:20px;height:20px;background:#eee;border-radius:50%;margin:0 5px;box-shadow:0 2px 2px rgba(0,0,0,0.2)}.loader span:nth-child(2){background:#f07e6e}.loader span:nth-child(3){background:#84cdfa}.loader span:nth-child(4){background:#5ad1cd}.loader span:not(:last-child){animation:animate 1.5s linear infinite}@keyframes animate{0%{transform:translateX(0)}100%{transform:translateX(30px)}}.loader span:last-child{animation:jump 1.5s ease-in-out infinite}@keyframes jump{0%{transform:translate(0, 0)}10%{transform:translate(10px, -10px)}20%{transform:translate(20px, 10px)}30%{transform:translate(30px, -50px)}70%{transform:translate(-150px, -50px)}80%{transform:translate(-140px, 10px)}90%{transform:translate(-130px, -10px)}100%{transform:translate(-120px, 0)}}.error h1.loading{display:none}.error .loader span:not(:last-child),.error .loader span:last-child{animation:none}.error .loader span,.error .loader span:nth-child(2),.error .loader span:nth-child(3),.error .loader span:nth-child(4){background:#ccc}.error h1.error{display:block}