Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class='spinner' id='spinner'>
    <img width='43%' src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI1My4xIiBoZWlnaHQ9IjI1My4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZFRDkyNTt9PC9zdHlsZT4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtMTI2LjM0OTk5OCw0MC40NTAwMDFjLTE0LjU5OTk5OCwwIC0yOC40MDAwMDIsMy43MDAwMDEgLTQwLjQwMDAwMiwxMC4wOTk5OThjMC4yMDAwMDUsMC4yOTk5OTkgMC40MDAwMDIsMC42MDAwMDIgMC43MDAwMDUsMWMxMy4yOTk5OTUsMjAuNjAwMDAyIDE5LjkwMDAwMiw0My42MDAwMDIgMjAuNDAwMDAyLDY2LjUwMDAwNGMtMi4xMDAwMDYsLTQuMzAwMDAzIC00LjUsLTguNDAwMDAyIC03LjEwMDAwNiwtMTIuNWMtOS44OTk5OTQsLTE1LjMwMDAwMyAtMjIuNSwtMjcuODAwMDAzIC0zNi43OTk5OTUsLTM3LjIwMDAwNWMtMTQuMTAwMDAyLDE1LjMwMDAwMyAtMjIuNzAwMDAxLDM1LjgwMDAwMyAtMjIuNzAwMDAxLDU4LjIwMDAwNWMwLDQ3LjUgMzguNDk5OTk2LDg2LjA5OTk5MSA4Ni4xMDAwMDIsODYuMDk5OTkxYzQ3LjUsMCA4Ni4wOTk5OTEsLTM4LjUgODYuMDk5OTkxLC04Ni4wOTk5OTFjLTAuMTk5OTk3LC00Ny41IC0zOC42OTk5OTcsLTg2LjEwMDAwMiAtODYuMjk5OTk1LC04Ni4xMDAwMDIiIGNsYXNzPSJzdDAiLz4KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im0xMjYuNTQ5OTM0LDAuMDVjLTI1LjE5OTk5NywwIC00OC42OTk5OTcsNy40IC02OC41MDAwMDQsMjAuMWM4LjYwMDAwMiw2LjY5OTk5OSAxNi41MDAwMDQsMTQuNiAyMy4zMDAwMDcsMjMuNjk5OTk5YzEzLjM5OTk5NCwtNy4yOTk5OTkgMjguNzk5OTk1LC0xMS41IDQ1LjE5OTk5NywtMTEuNWM1MS45OTk5OTIsMCA5NC4xOTk5ODksNDIuMjAwMDA1IDk0LjE5OTk4OSw5NC4yMDAwMDVjMCw1MiAtNDIuMTk5OTk3LDk0LjE5OTk5NyAtOTQuMTk5OTg5LDk0LjE5OTk5N2MtNTIsMCAtOTQuMjAwMDA1LC00Mi4yMDAwMTIgLTk0LjIwMDAwNSwtOTQuMTk5OTk3YzAsLTI0IDksLTQ1LjkwMDAwMiAyMy43OTk5OTksLTYyLjYwMDAwMmMtOS44OTk5OTgsLTUuNjAwMDAyIC0yMC4zOTk5OTgsLTkuODAwMDAzIC0zMS4yOTk5OTksLTEyLjYwMDAwMmMtMTUuNTk5OTk4LDIxLjAwMDAwOCAtMjQuNzk5OTk4LDQ3LjEwMDAwNiAtMjQuNzk5OTk4LDc1LjIwMDAwNWMwLDY5Ljg5OTk5NCA1Ni41OTk5OTgsMTI2LjUgMTI2LjUwMDAwMywxMjYuNWM2OS44OTk5ODYsMCAxMjYuNDk5OTkyLC01Ni42MDAwMDYgMTI2LjQ5OTk5MiwtMTI2LjVjMC4xMDAwMDYsLTY5LjkwMDAwNSAtNTYuNjAwMDA2LC0xMjYuNTAwMDAzIC0xMjYuNDk5OTkyLC0xMjYuNTAwMDAzIiBjbGFzcz0ic3QwIi8+CiA8L2c+Cjwvc3ZnPg=='>
  
    <div class='circle c-1'>
      <div class='main-circle'></div>
    </div>
    <div class='circle c-2'>
      <div class='main-circle'></div>
    </div>
    <div class='circle c-3'>
      <div class='main-circle'></div>
    </div>
  
    <img class='name' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYoAAAAmCAYAAADa19wxAAAAAXNSR0IArs4c6QAAG15JREFUeAHtnQmYXEW1gM/tmUkmCxKyCjyFCG6gQTaJIhAMZAGC4hN4YJAlCdmBIOjjQySC8pBIImRlM4DwVIIgKIQJYQsiBAKKLK6IeSCQTEiAECaTme77/tPdt6du9b3dt3u6Z0lufd/tW3Xq1Kmqc6vqVJ1TVe0skjGu+J2G3+J5RR9H3FcAvJKSmidmyP1r/ahxKOZAzIGYAzEHtncOOAGCIqzOKSJ+m5LU1TNkxaowpBgecyDmQMyBmAPbFwdKERRmze/qIe6kidKw0QTG/pgDMQdiDsQc2P44kCizSl/bJs59c+ULvcpMHyeLORBzIOZAzIFuwoFyBYVWb3i97HxtN6lnXMyYAzEHYg7EHCiTA+0RFJrlxMUyZnSZecfJYg7EHIg5EHOgG3Cgtr1lZEfUVTwrHBHdLRW77ZgDC2TMSGYWtxpVHDtNHviTEQ70LpLRE4n4ihfpiLN5nQwfP1tm6waJ2JXJgRtk5JAWqZtD8n487/A00g8bYWr6DZ9fWydNL8yWR1vLzKJosoUyZhZ5XpBBdLa40nTAdHn0/aIJCyDQXuYRvbeHAv2np0rD5V643LdOal1xZ5jpe4ic3lG21nL7j1le2w+vpgMbY8A3TpOG041wWV6bLoLCmcwYvzPUPswH2dUV51DCHy2B+rCFMuowZMWqEtLEqN2QAwiJcyn2bkbRz8d/hhEO8SZepE3d4EXqjGKIPHULrwYPFr9L4wAd+bAWcX5Oqt3NlMpb+nHaMSjKYKnfuEjG3uNK6o5a2fDQZHm2JRvd7tdsGVGLMDqPb5ttE4we0utMCM9vH/EE44l7oEdD61EJR+n2gM5xJq0mSdab4Wr6y+8/hUrlDCPWrNMbhbCjx/npJqbJ8uuZFc7h+dZUeeDUqbJ8T5raCRBsjEq0RmqOjYob43VPDlwnY/ei5PZ3PuU6Gb1rsRrRxp4Cx7fyoOufXSxdHJ/PgTvkxJrFMvoS+ujDxPqERD52GtKfQfdMBvTlSRn098UyyhxUQpJEAw+SXl+FtjWpdM/VMkajsONgtaf/dAUuIeT8jtmIS8f+NQ3xeGK2+WODQ0j8fYNjYuj2woFWcadTF7u99EhKwreUD6svBzdzK4oszrgoQiaM3o4IXyij994gm1cxM76M+pejNt7DlcRvUMEsvUmO36n9PEzNDKCxV6NszqkZA+J3SFB7+09nM83u+LnyZGaBzu05QGFPn8LRcSwzaGeBjBxwnRxY1924sVBG9GWgV5VCgHMnXyfjegdE+EBbpfk2AB8YwLqkSAhNAyv2is7Qs7YAhHXqHJ6DzCclieGsGEYiQI5noncKc71JtLfrYN2rQewj7oxm2fYkAmPPoPgosCUyej/yPDwIlzKoSjJ2WQ5Uov90NjMLzkr44M/QqCJ0ZreplIqobnOg9PxkjTifhT46NvezTFY/yXstq5PnkV7P0+ifHyg7vXSSLGM80VZ/1M6c3SgokPpKy8Yz5dGtdlkYyAZuk63YrcJdD9nY6OlvMbImPiyrP0XZhtMheZzh+PcmtV5t8m+epxLiLJ0iy18Oo6gCoUWGHMAAexjP4YtFDqVe/Vn+JzkN/1fqukbVAQNkp2VeHcNo6UCxTt4ZEhav8HpJJSfJQ+sK4ZQbl5Bep/Fd+oWkH9AqLWcQtygkPg2eJY++w8B0B3xU3KxzJsLrK2OjtseP/PcCGX0Aq4gl9MWD6RPfny4Nz+ZjBUJuVOhiGXso32423qM0bLh9+RarFsgxh5VzNU9KnKDVhEf+UOgeAt3VHmBHflei/3Q2/0JXFKUUjAacNzgHpadhOgtl7MkY2P7GQPsiYTXGXQQYvan7cfxHMXh+C3q34n+eDvIcy+0jlVZSaq/CFvLvQs9W6WF3Bk1K2tYHCqXTuKQMUKMQo92YYYPkqdUpcV+ig91EWXR2hiATPVw4lOdLPBdoPAPfSgSYpaNVGsd+LCmDn0xI6imExBzwx/GgK0471d/uQ52/qfWnjr9T/Gxc4GuTvDe4WPnZ/fKHwMTtBOo3gw+2eglwm+ObnafCtQ0S7EPiX2/FDMWofbQFi4NZDtBXLqOfPE3w4HKZgs3xCeyPR9OOx0Njk0XnI7TRu6+VsT0teMGgroxBONVCstpEKl5VwKBK9h+L3x0aLNi5qWTUBvpasVKrPpqBdTkD5y/A1QE3ihvGIPQwg/flpGNSVV1Hx/wGOTxNRiztizv4MxIBtgbj4uc9bHaYHIFoWkMTye3a8OJC3qxWWn+PkXFwSHyngqnbSAqAYPO57/lCCPmB8qQKw4JuhjzwJLx9wUSCh7FR22SI4YdXxxDUiUW73XRZfjsreO3P9q6Y/Wsz9qfIeSSkx0SQdeLkOZ0o/tAL6Juyf609qi2TVnf2V7L/dCYfQgUFAx4qF1cHzqKOQbzgEnO+jBqK0VN3vowuSiwY4bsMKCcGR1UG6krNV6jHz6BW0uwK/EGUrYGl9id0uQ3PlgPbpZRSIQyHYGT0dbRS0lcX10En7nMvsTtOy/qMCWVgiDiDdO1VRWSjNjPfD5l5xv7SODBZlutt0LqjsdlKeVFU47aqjUk7zUq/rKf0uArYuwa8NiVitx0jekfxVrr/dA7f8gQFgx4XBY7VbW/3UqSCev1skZlN1OrgGOi0ATKTuQ96eSqawAShQCdMRx6aopQIOhBbDnNb0EtJqsn6sYS/iUdXS+ZMqxQ6Z6hALSVBtXGzKrFj/fm4ixEKLu1knglH2B2+RI4puhJrj1Gbme9SVpd/xLB7RqnqErOsO7Kfg2u6Yp5t8QAbXnOkld0Q6cmOJrsvO4smyL2bUVGm7SIebfKZoLZFL7yjvavRfzqLhwmEwtl0vgt5rmap+L8Yv/5FQ7ibAg2KWKjbp8l9m8Jwm6XlGgbST4fFb0dwtV3s2Y761GKH0CV9F3LJ6RTGnExsbpWErrqkVhrvRFi8bhaWQ11FVxVq1CbNMjMd7WPi7CI2juxWWlVvsdtGliI0/rlQjvmcn04cisKBhDReDd4/TFxsGFN0kmjCgvzgzTThJHgue04GfXzNfOJajfgP8T82XaxNG6Wrurfy/afqRQ7JgEHA1W10umw8n4ZySv5sISRlBtzE1rzLwzAQOl+G3plh8THczwFWNUX1/P4U1QvNkVF9+HZn+XNwbztHlr+nsMwOMVcHhpyj/ZwYZNzPIWQ9CBRb/VTUqJ3dSltn0OrLblvfYJdVixgoXcd7o4zuX0wYdlRp9duxApxr5bc3G0f2t2C+IJPJYQCOMIGol3K73XT3FG3gLjMeleo5Xfm7mGWtpL+a/aeS5YxKC0FRvmOpeVHY1joajMPOoB+VSJ1kspHngxLTVQp9EzOmC2n8X2R2tA9ET+J5ogzijzDoX8BAezTPxaR/OQoNKr/vUhlRHwW32jh9xDmNT+hT91Gn3KCg+TtSewNl3mKUpRbjvm/GacTlvNNlxe9J/WIOgAc6oaqPzADr+GamzGRvs+8UGiw9T2KFvIYB7QpWxyNmy4lRVKdmMSrmpz6ocEcdSFm+y/MEW7vXD5bVx1csg3YSahG5ExI09TbnSIKJXUFnf9tNtVKnOxdzjnr/JBdIe9yPDpH6r/th23+omv2nM7hXW36mzqXT5QHUSsGO1cThDCxFddaZ1O5qtgFeVic9Hlddp8J0xwSNTg3YbJ8tzTis6ctwyYQkRk2R+9mxlHN/5gzDXbqFFQjG/eKOOv8QPfB3DcyVHLi51pF6pbGfAQ/yJrZIbz0vsTYosqNgOsgttlQM5P3YVFnhG9xV5cggeDNxqqLy3CTsUpd539EDBrx1VXGtAU8btSdLw5sGLO3VLbSUaagJRwW2xAyrv5c039Uk9UrzIvAvGiyb32cn25Xs+FHje4e6RTKiDwPvg2S6i5cxK6lZ+H/thTvzzcqwkW/3KmXYq60cbqgqL7sl1t7csnSy/MY3qdOdbdDVjSu5/sK3UJWk2u92CEd9O6L/hPGyvhLXtFCHPcwMyhEUb7JSmEqDuMckZPsdSX2D2bkNDgrfsl6+cBazRt/shp01/wJ5DgbeO2skoYPsbkGJKwi7zRISadJ6GG6BjPoOQuSxYnnB3L9Ql+/Zd93pzJdL3FDvRT7pXiyrqsYHbemzVxNeARKSvAY99FTC3up0Z+xSEwhbM0svhfdO3MY2Yl1x9spCvJPaV3gY3hu+2quNJ2bK/b5ttoqrhy0xdN9Kq9MBWZ2eKL+QA5fz7AFN7RuOJP+LYr8F/Tdpr29w6+bjmWThv3oOCJoq8LU97s7D4dGdjrIPTeo3Z7LEisv9tkfNM/gHtTMPpyPf1Hs9vDIFxUfC8s9siXW9b6VoLt8+T1hrBPyZR9//pfqz7mC9xDAKf70E3fndMf0nlEP99ZqW0NgyI7zOXSS5+w4IN9E2jmsVZ+gMaSgoJJQYDWVkEaKqbnh9i6Sm20LCTDdTVrwKrTNNWJX8K8PobpCddYbEar2wYyD4eVhdaiSpwq6oq5PktqJIVUfwGyzJ7s2EbLg7KNsp8uDfgf/WH+eeW0wvndkA4RY1ahtGbDOLwAFKEfhPd12p0LRybuekbDs5F8p6EBIIE+c7oM5jYGO261xs49jh+XL0buD+DLiuck/n4YCo+4QtJLx0KWGOYbWbKAZ/L3213wiJGn8eTm9/OBPKXPLnTrXiVmS/vQUWWcfKDuBaM4I+/C0zvH37q99/Opp/Kii2Fs/USdGofsCM4D6WrM3F8LN/kTq0GF5C3J9cKCtMHXdgElQHK4h4LDCyQkAG+TfCSM2WZTp4/zss3oMzaOTNcr24N+VLr+PvAkLAK1HwO7tF91h/rHuDd72JH54J0TbmWfA92Ub5NQuWF0Q1o4O66fKM2gFG7Ld7yVbVrwc6JhZ/YRb/uD/S8a1I5smIfgiGr5s4SBa7LGZ02s/KdjKeOiMCdWUyNB22mNfgja+s5PN1ruUPnbkbtDvCa9ZFVwKwO99lL/nbw4rx2avMOP3/C2jNN2HwYdwSOfrjJmx79Hdk/+lI/iWQ9JdEyLA/eqFlUfeu95IB/aFJ2yjsyPvBwhhmrBN6VsPEKtePoHivSNp3i8RT4cRrYTjZlcbbYfFdBY6tSO0N5kyTTl8XOhhquVETPsrrD+r3HAOi6qULOr1eAoSXTCTS5QZ1eMZExm/EBndp0H1eJg0a3nVmGP9w9ObDPFgPqT8Vvzl7fovtvgWX62oYp2wqKHKO8G8ny8r/ywECPPQbW4jW0U5so3BAyg4B7erPxdnkD2dC8NMu71rUbfcF4XowBOiN+Dd7Yd6MNTXnGeHt0tuR/SeEgWg+nGfb/8gGk35tozT9hF0Jp9DoDzAjbD+N5aA6cecC14GkoGuRpFNbECMTWSNuYwS0NArl21hU8kQlFoCXklayKOScVr9GIx+3OI38NF0Jolv6EJhnWWWCMcl72E1kgf1BVCqoZcwv5ByCjv7QrDDwIxshUlwP468xQDmjdoARW/XiBYWW0skatVUoDzDoqgCaoWHynGjA1YtRtvAf+gyS90+kfrrRwHTsahq7xgQE+9MzdUP4umrwvzyCwT+YXAWguo2Z5cOHLVKvWOH03WfARljwnTbI+6sLtYnM0sTfpRCap7NN+JKO+kc5q8xVD3ZG/wmoVCPnWg4KgJcEYmKlk63cpK1Wl4ncUDkJSbiaiILjO599GsbC37Hbybclzi5BndRwcpdxtYhLivMhUPJ2uQQnS+2S7uLBkTG0AhzoK4nxfGP47HP1CMgDfZCAgF9IZBBQAemqQlcNoY5Z5s8wal8JQq8sUs6oTVlyDTUb91CYXtzMQFccNPRbgJmrmvEYtb+dlOZPA9/fwGf8qtHZb0GHsZtZtSkI06H/gDc8pTqnHyfUVSCbArJUIu3Cb5WaE/y1SZN7xiaKCmkGK38b3J9685TmoNJnm8gUUl1RWsrugd0Z/aejOJPQjDBOP8eryC6VTJH42Nejh/tUJhT82yRvbyTGP50IRHW/GAgOBDpHBIJjYEU4wMfiltg8FUN7aX8l+89eoXTCjNqL5bjdSTTOTMigFWrENvGyfl15mG0wa9SusVcTKynDPwPS50BMjg6GPYfkABXwIFg77Z/g1DhN/tOsarDsSfpUwXpIECHxDQuvnUFnRmeeb2ln4UOTd1b/CS1QhSPSgkJp1kjdpbwKdphs3n0x6t2ZOXmYhViv8+XJJkCvWuCg4DkZPXRQVBsss5Wx7AsF2wjFvlAOMBh+mch9QxHKi6hJintusaQMRjdYOENZkbLS8BmO32Dn1b0WXmiQq7X/SuRjJgKDI6on9xQTFpC3GZ32MzliNVFxN7RR3j+h4lQjEERtNAG0T1ioq2bKg2+YsOaMis605ZjR5fp35XyL7xuUS6grpevM/tMRfMipmnSfOXvEpzJra4iQ8b59JLEYvG+G4ULnITrhx8LiM3Dnc4PkyQvwXxWGp/+exvbGpczoDB1vGHYML5cDAYMh+urUyaXS45tPY0A+y0h3JpejXZpZORhQw4sqk//kGKNGbVNQHWmgsDRwbipmRzDx1c8s73rqNcKDEz7A8+sb1dg6jNj3mDDbr9e/k+4kE054Hltff2zCovi5y2s5eMM8XPrILPx3euGOeLMhRdVlqurzOfir/TnndNXBQVN71YEBO3VpDimih3398/kOXzDQZ8FDPe/Ca/tw1MWeTHRY/+kIDuYEhWam21DpsDqTOy1C5qdhzPodhpNA4yKN43bawaRidBhUruQUNnrj1Hc4+bvexF8gY0by72kLwCmo6jLTxP7SOaBb+mjox1kpF02TFc9asKJBhMIPsTmcDqIn2PvybdXW8KNCiRm0b+A7h6k/sY0m7VVHIXLpOGxgd3F54AYCA4ORnaJGbA4TTmJA72mkT9K2r5kpD/hm30Z8qJdZJ2c2ZKmB8EX60HDvUj0DXhWvqnxqZfMvIb6LmQFlemGg9PUJrLdl8/Hg7GHiMVmbU06boN4/hs6vDFr7ZQ6lNaw0YN3W2xX6T7WZl7AzQAV1PjDtXBGce43+VWMQIrtd+BN4WRMUZ8FUN34Gne91hNQrPPpHReyoGLOewq2kEcdCwmJYpYOoEnXm6A3sOs3bQnBpOflk9P3Or/1p3ZnF/iuckVgnKE3+dLnQfXomIReK6NEzPwigW0LQ3VpxbgyJS4Nnp/97wZ1i4sCbe8PuNzPxgvwILt0E8pY/Lm3w94OqENLr/lH56OrJtguyq8052z40SD19M2QVJgi0x8op2iDZSfNlhu1zOs5sF64r9J9qMzJPUKCC2sAMKupHrGe31B2ZA0z+otKw2MqoJ18juzowP8ZzJM/neQbxxK7KHMjamiaY2fDtCl4db+IG+dlOO9eC785/hZ9swXzB7JZJ36y2DcEpxYjdlgwfu6pso7YX/5D+kY8XCHrzl726M8i3q4k2vSAINwose1h1oYV7gt5rZsEqGkSlPK5Ztv0RomNswvT1/7ZXNPPlmM+Cp/0w5xAmZdc7I4Sca3LE0h5nzBIZu48f1v1CXaX/VJtzeYJCM+RSO53drYiY+V49pedSZiD0Kb9jVfEw4LJmpn5KcahaHNAtfdD2qSII24NZSdlnbofN+9fDopMP2lCQGvPV9XJIFLtZYBmZ/f+NiEcDIoPystF8s2oiX5oiyx+xkUoJs2JXofeBkaYq/wSnwgcBcTEr8xcRBveSn07CbDefvn61DayVpF3vTVskiSq5fOdKE+NA+iogj4jeLj3LC3TXd1fqP9Xkoc9G4c9IL3pLvgCstx8eFHK+ukRGMxDkN7qeUnduszQPR2B8OihlDOs8DjAw6y2XM3TebbjH2DH0JyNclpdZw1yoqj7cc/vzfwdHTpeGRzyA/c4atV8GnptpQud6dsalbNxSwkqDshxppFm/PqMOMUB+L+15PzI9zIRiQ1kILR+zzPgofl2xY5e4FTI5lRY09Z/gvs8p73cL0SD/4xj4d7VxSM+pcXcgs/4B4GCPUb/0Q0AQFermcqL+AtU5mk63xHIlur0ldmmUq3ZMOrY/e0ki36HtkkRwxrNZ4GLbNmmnpS56qeBvbHixMJV/GkF4eSE8Lvu8GdrNhXCC4npweHCCNGzqSv0nqJyVgoUKCtU1MyO5lMY2J0pmNNL/wWi1Wju7ia+nTzFwHofQeRz4bmZcCf5t4P6L5xMlpIlRi3CApf+RDCqfMdHao2Iw6ejFcKhu1gLbw4PTcXVV8YgXDn7rVlnXu/aC7576aTBedGiLOHdj1G4kRVqdyWB6c/b+rlAiqbQA9UW/m5ImXWlXwLlqtD+bx1vRe/8Elze792eWPviYd/iRgRRHrdLvTCjtDf5ZD3gGk4FltpBQdITEBF691Z91Kf7KeJEXaM+7RWQ+A46uIlTNrK6ePz7TYszWQJijZkOIYwwpzSGUiiaA9tFFkQIQmiRZ3zX7T0BhKwDyGmogKb3eg8b3XGBkPpA7bOQXup3QjlKhUyOtuj3u93ZchPA2hNWpDB5/i4Abo5TAAa7d8KkY6Fav880tQ3QJBA1UPfFP8FoDhNc5pthhzR6SYradu6jyrmKzTT/94FDWNnBzNtblhtmCO6h0Vg2ub1atwsX+o6Tg3IpDM2c83PtNTDZznJMxnpvQivo3Q+0HzbL1kyokgihnbokVW34sL2bLCaIVBOM7vE4b8OXNmDEte4loUJIuDeuK/adaDCsoKLSzc2BqEplrp4/idtdtsdkG58PXy9O4SOxwBnxUWqKzuyjuGegdwvLxV1GQY5zoHMgYUJ1x/hTOkuwA7weXGeJK+htJ+p6RPMFS/zwjnOf1G7XLN2LbhLkjSoWD6mIeRv31DzveDGdn1b0MGLcnt7bLbmPQSnsRypbB3/3oIOn1nzZeO8OqUmmg2jN6iLsnAuKS7H+WB5LlIJ62hz3NSGblZRuxTTpt/ryNDoN6Sr/xbfHdw8fE4SMIvS7Xf6rFPVaChZ1e78Ehnd16SqoorkfpZWmkP+a77BY8BqMTfzpQ3vsMUuoAsLKPsw/+f/KsoWGvSUjNmrfk8895+mk61izu25lNfKhLSCpwAEDYnOZIS+/QhETUSM8/F4qvBA066m6F8giP27CB++0OCo/XmAQr++iOht4bnvpmj65sq6hAZgb5HupLLtNrG3z4Rk3FSknZ5jLrXwe/VvkKWCxhgXi9IwrbwGza1qoCaNko53H+r8IYBGo+iHLHVHG6bRhqq1kiY45lVpqbrLlSy4y7zTFIXwEvsDkUdvC3FcNwE7g8blMSHkN0i7Zp+w+bClMSbo91Jns45J/krwUapnuACrz1HAZtYjxl7tNGLvVam58vFLHeZpogP3msNeH0Yb5rKlc/M65Uf530bElKq695dk7/cW+j7z/bVn73gzZ/e3x+uv8P0Atjk+jL6PoAAAAASUVORK5CYII=' >
</div>
  
<div class='card' id='card'>
      <div class='imagebox'>
        <img src='http://ramiawadallah.com/img/port-image-350X400.jpg'>
      </div>
      <ul class='social-media'>
        <li><a target='_new' href='https://www.facebook.com/rami.m.awadallah' class='second-color'><i class="fa fa-facebook"></i></a></li>
        <li><a target='_new' href='https://www.instagram.com/ramiawadallah' class='second-color'><i class="fa fa-instagram"></i></a></li>
        <li><a target='_new' href='https://twitter.com/rami3wadallah' class='second-color'><i class="fa fa-twitter"></i></a></li>
        <li><a target='_new' href='https://www.linkedin.com/in/rami-awadallah-26337335/' class='second-color'><i class="fa fa-linkedin"></i></a></li>
        <li><a target='_new' href='https://codepen.io/ramiawadallah' class='second-color'><i class="fa fa-codepen"></i></a></li>
      </ul>
      <div class='info'>
        <h2>
          Rami Awadallah
        </h2><span>Graphic designer, UI/UX,<br> Webdevelopment & Animation</span>
</div>
</div>

<div class='footer'>Copyright Rami Awadallah © All Rights Reserved</div>
              
            
!

CSS

              
                *{
  padding:0;
  margin:0;
}
.main-color {
  background: rgba(150, 0, 72, 1);
  color: #fff;
}

.second-color {
  background: rgba(254, 217, 37, 1);
  color: #960048; /*main color*/
}

.third-color {
  background: rgba(29, 202, 211, 1);
  color: #fff;
}

.other-color {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

body {
  font-family: sans-serif;
  background: rgba(0, 0, 0, .1);
}

.spinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  box-sizing: border-box;
  z-index:9999;
}

.spinner img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.spinner .circle{
  position:absolute;
}

.spinner .circle.c-1{
  top:40px;
  left:40px;
  right:40px;
  bottom:40px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border: 5px solid rgba(150, 0, 72, 1);
  border-bottom-color:transparent;
  animation: animate 3s linear infinite;
  animation-duration: .85s;
}

.spinner .circle.c-2{
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border: 6px solid rgba(29, 202, 211, 1);
  border-top-color:transparent; 
  animation: animate 3s linear infinite;
  animation-duration: .95s;
}

.spinner .circle.c-3{
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border: 7px solid rgba(29, 202, 211, 1);
  border-bottom-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent;
  animation: animate 3s linear infinite;
  animation-duration: 1.05s;
}

.name{
  margin-top:109px;
  margin-left:0px;
}

@keyframes animate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

#card{
  display:none;
}

.card {
  position: absolute;
  width: 350px;
  height: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   background: #000; */
  border-radius: 10px;
  overflow: hidden;
  transition:.4s;
  box-shadow: 0px 5px 0px rgba(0,0,0,.1);
}

.card:hover{
  box-shadow: 0px 10px 0px rgba(0,0,0,.3);
}

.imagebox{
  position:absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  background: rgba(255, 255, 255, 1);
  z-index:2;
  transition: .5s;
}

.card:hover .imagebox{
  transform:translatey(-80px);
}

.imagebox img{
  transition:.5s;
}

.card:hover .imagebox img{
  opacity:.5;
}

.social-media{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:flex;
  padding:0;
  margin:0;
}

.social-media li{
  list-style:none;
  margin:5px;
}

.social-media li a{
  position:relative;
  display:block;
  width:50px;
  height:50px;
  border-radius:50%;
  text-align:center;
  transition:.5s;
  transform:translatey(180px);
  opacity:0;
}

.card .social-media li a .fa{
  transition:.5s;
  font-size:24px;
  line-height:50px;
}

.card .social-media li a:hover .fa{
  transform:rotatey(360deg);
}

.card:hover .social-media li a{
    transform:translatey(0px);
    opacity:1;
}

.card:hover .social-media li:nth-child(1) a{
  transition-delay:0s;
}

.card:hover .social-media li:nth-child(2) a{
  transition-delay:0.2s;
}

.card:hover .social-media li:nth-child(3) a{
  transition-delay:0.4s;
}

.card:hover .social-media li:nth-child(4) a{
  transition-delay:0.6s;
}

.card:hover .social-media li:nth-child(5) a{
  transition-delay:0.8s;
}

.info{
  position:absolute;
  background: rgba(150, 0, 72, 1);
  color:#fff;
  width:100%;
  height:80px;
  bottom:0;
  left:0;
  text-align:center;
  transition:.5s;
  z-index:1;
}

.info h2{
  padding:0;
  margin: 10px 0 0;
  text-transform:uppercase;
  font-size:1.8em;
}

.info span{
  color: rgba(254, 217, 37, 1);
  text-transform:uppercase;
  font-size:.8em;
}


.footer{
  padding:20px 0;
  width:100%;
  background:#fff;
  color:rgba(150, 0, 72, 1);
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%);
  text-align:center;
  font-size:.8em;
}
              
            
!

JS

              
                function onReady(callback) {
    var start = new Date();
    var intervalID = window.setInterval(checkReady, new Date() - start + 1000);
    
    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('card', true);
    show('spinner', false);
});
              
            
!
999px

Console