OneCompiler

Google loading circle

125
   <style>
    .oErxNe-Xo {
      width: 36px;
      height: 36px;
      overflow: hidden;
      animation: 1568.63ms linear 0s infinite normal none running mspin-rotate;
    }

    .oErxNe-Xo .oErxNe-WkJb5 {
      animation: 5332ms steps(4) 0s infinite normal none running mspin-revrot;
    }

    .oErxNe-Xo .oErxNe-n {
      background-image: url("https://ssl.gstatic.com/docs/picker/images/loading_spinner.svg");
      background-size: 100%;
      width: 11664px;
      height: 36px;
      animation: 5332ms steps(324) 0s infinite normal none running mspin-medium-film;
    }

    @-webkit-keyframes mspin-medium-film { 
      0% { transform: translateX(0px); }
      100% { transform: translateX(-11664px); }
    }

    @keyframes mspin-medium-film { 
      0% { transform: translateX(0px); }
      100% { transform: translateX(-11664px); }
    }

    @-webkit-keyframes mspin-rotate { 
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

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

    @-webkit-keyframes mspin-revrot { 
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }

    @keyframes mspin-revrot { 
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
  </style>
  <div class="oErxNe-Xo">
    <div class="oErxNe-WkJb5">
      <div class="oErxNe-n"></div>
    </div>
    <svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11664" height="36" viewBox="0 0 11664 36"><defs><path id="a" fill="none" stroke-dasharray="58.9" d="M18 5.5A12.5 12.5 0 1 1 5.5 18" stroke-width="3" stroke-linecap="square"/><g id="b"><use xlink:href="#a" stroke-dashoffset="176.66"/><use xlink:href="#a" stroke-dashoffset="176.58" transform="translate(36)"/><use xlink:href="#a" stroke-dashoffset="176.32" transform="translate(72)"/><use xlink:href="#a" stroke-dashoffset="175.85" transform="translate(108)"/><use xlink:href="#a" stroke-dashoffset="175.14" transform="translate(144)"/><use xlink:href="#a" stroke-dashoffset="174.13" transform="translate(180)"/><use xlink:href="#a" stroke-dashoffset="172.78" transform="translate(216)"/><use xlink:href="#a" stroke-dashoffset="171.01" transform="translate(252)"/><use xlink:href="#a" stroke-dashoffset="168.78" transform="translate(288)"/><use xlink:href="#a" stroke-dashoffset="166.02" transform="translate(324)"/><use xlink:href="#a" stroke-dashoffset="162.73" transform="translate(360)"/><use xlink:href="#a" stroke-dashoffset="159.01" transform="translate(396)"/><use xlink:href="#a" stroke-dashoffset="155.04" transform="translate(432)"/><use xlink:href="#a" stroke-dashoffset="151.05" transform="translate(468)"/><use xlink:href="#a" stroke-dashoffset="147.23" transform="translate(504)"/><use xlink:href="#a" stroke-dashoffset="143.71" transform="translate(540)"/><use xlink:href="#a" stroke-dashoffset="140.54" transform="translate(576)"/><use xlink:href="#a" stroke-dashoffset="137.72" transform="translate(612)"/><use xlink:href="#a" stroke-dashoffset="135.21" transform="translate(648)"/><use xlink:href="#a" stroke-dashoffset="132.98" transform="translate(684)"/><use xlink:href="#a" stroke-dashoffset="131.01" transform="translate(720)"/><use xlink:href="#a" stroke-dashoffset="129.26" transform="translate(756)"/><use xlink:href="#a" stroke-dashoffset="127.71" transform="translate(792)"/><use xlink:href="#a" stroke-dashoffset="126.33" transform="translate(828)"/><use xlink:href="#a" stroke-dashoffset="125.1" transform="translate(864)"/><use xlink:href="#a" stroke-dashoffset="124.01" transform="translate(900)"/><use xlink:href="#a" stroke-dashoffset="123.04" transform="translate(936)"/><use xlink:href="#a" stroke-dashoffset="122.19" transform="translate(972)"/><use xlink:href="#a" stroke-dashoffset="121.43" transform="translate(1008)"/><use xlink:href="#a" stroke-dashoffset="120.77" transform="translate(1044)"/><use xlink:href="#a" stroke-dashoffset="120.19" transform="translate(1080)"/><use xlink:href="#a" stroke-dashoffset="119.69" transform="translate(1116)"/><use xlink:href="#a" stroke-dashoffset="119.26" transform="translate(1152)"/><use xlink:href="#a" stroke-dashoffset="118.89" transform="translate(1188)"/><use xlink:href="#a" stroke-dashoffset="118.58" transform="translate(1224)"/><use xlink:href="#a" stroke-dashoffset="118.33" transform="translate(1260)"/><use xlink:href="#a" stroke-dashoffset="118.13" transform="translate(1296)"/><use xlink:href="#a" stroke-dashoffset="117.98" transform="translate(1332)"/><use xlink:href="#a" stroke-dashoffset="117.88" transform="translate(1368)"/><use xlink:href="#a" stroke-dashoffset="117.82" transform="translate(1404)"/><use xlink:href="#a" stroke-dashoffset="117.8" transform="translate(1440)"/><use xlink:href="#a" stroke-dashoffset="117.72" transform="translate(1476)"/><use xlink:href="#a" stroke-dashoffset="117.46" transform="translate(1512)"/><use xlink:href="#a" stroke-dashoffset="117" transform="translate(1548)"/><use xlink:href="#a" stroke-dashoffset="116.29" transform="translate(1584)"/><use xlink:href="#a" stroke-dashoffset="115.29" transform="translate(1620)"/><use xlink:href="#a" stroke-dashoffset="113.94" transform="translate(1656)"/><use xlink:href="#a" stroke-dashoffset="112.19" transform="translate(1692)"/><use xlink:href="#a" stroke-dashoffset="109.97" transform="translate(1728)"/><use xlink:href="#a" stroke-dashoffset="107.23" transform="translate(1764)"/><use xlink:href="#a" stroke-dashoffset="103.96" transform="translate(1800)"/><use xlink:href="#a" stroke-dashoffset="100.27" transform="translate(1836)"/><use xlink:href="#a" stroke-dashoffset="96.32" transform="translate(1872)"/><use xlink:href="#a" stroke-dashoffset="92.35" transform="translate(1908)"/><use xlink:href="#a" stroke-dashoffset="88.56" transform="translate(1944)"/><use xlink:href="#a" stroke-dashoffset="85.07" transform="translate(1980)"/><use xlink:href="#a" stroke-dashoffset="81.92" transform="translate(2016)"/><use xlink:href="#a" stroke-dashoffset="79.11" transform="translate(2052)"/><use xlink:href="#a" stroke-dashoffset="76.61" transform="translate(2088)"/><use xlink:href="#a" stroke-dashoffset="74.4" transform="translate(2124)"/><use xlink:href="#a" stroke-dashoffset="72.45" transform="translate(2160)"/><use xlink:href="#a" stroke-dashoffset="70.71" transform="translate(2196)"/><use xlink:href="#a" stroke-dashoffset="69.16" transform="translate(2232)"/><use xlink:href="#a" stroke-dashoffset="67.79" transform="translate(2268)"/><use xlink:href="#a" stroke-dashoffset="66.57" transform="translate(2304)"/><use xlink:href="#a" stroke-dashoffset="65.49" transform="translate(2340)"/><use xlink:href="#a" stroke-dashoffset="64.53" transform="translate(2376)"/><use xlink:href="#a" stroke-dashoffset="63.68" transform="translate(2412)"/><use xlink:href="#a" stroke-dashoffset="62.93" transform="translate(2448)"/><use xlink:href="#a" stroke-dashoffset="62.27" transform="translate(2484)"/><use xlink:href="#a" stroke-dashoffset="61.7" transform="translate(2520)"/><use xlink:href="#a" stroke-dashoffset="61.2" transform="translate(2556)"/><use xlink:href="#a" stroke-dashoffset="60.77" transform="translate(2592)"/><use xlink:href="#a" stroke-dashoffset="60.4" transform="translate(2628)"/><use xlink:href="#a" stroke-dashoffset="60.1" transform="translate(2664)"/><use xlink:href="#a" stroke-dashoffset="59.85" transform="translate(2700)"/><use xlink:href="#a" stroke-dashoffset="59.65" transform="translate(2736)"/><use xlink:href="#a" stroke-dashoffset="59.5" transform="translate(2772)"/><use xlink:href="#a" stroke-dashoffset="59.4" transform="translate(2808)"/><use xlink:href="#a" stroke-dashoffset="59.34" transform="translate(2844)"/><use xlink:href="#a" stroke-dashoffset="59.32" transform="translate(2880)"/></g><g id="c"><use xlink:href="#a" stroke-dashoffset="70.71" transform="translate(2196)" opacity=".05"/><use xlink:href="#a" stroke-dashoffset="69.16" transform="translate(2232)" opacity=".1"/><use xlink:href="#a" stroke-dashoffset="67.79" transform="translate(2268)" opacity=".15"/><use xlink:href="#a" stroke-dashoffset="66.57" transform="translate(2304)" opacity=".2"/><use xlink:href="#a" stroke-dashoffset="65.49" transform="translate(2340)" opacity=".25"/><use xlink:href="#a" stroke-dashoffset="64.53" transform="translate(2376)" opacity=".3"/><use xlink:href="#a" stroke-dashoffset="63.68" transform="translate(2412)" opacity=".35"/><use xlink:href="#a" stroke-dashoffset="62.93" transform="translate(2448)" opacity=".4"/><use xlink:href="#a" stroke-dashoffset="62.27" transform="translate(2484)" opacity=".45"/><use xlink:href="#a" stroke-dashoffset="61.7" transform="translate(2520)" opacity=".5"/><use xlink:href="#a" stroke-dashoffset="61.2" transform="translate(2556)" opacity=".55"/><use xlink:href="#a" stroke-dashoffset="60.77" transform="translate(2592)" opacity=".6"/><use xlink:href="#a" stroke-dashoffset="60.4" transform="translate(2628)" opacity=".65"/><use xlink:href="#a" stroke-dashoffset="60.1" transform="translate(2664)" opacity=".7"/><use xlink:href="#a" stroke-dashoffset="59.85" transform="translate(2700)" opacity=".75"/><use xlink:href="#a" stroke-dashoffset="59.65" transform="translate(2736)" opacity=".8"/><use xlink:href="#a" stroke-dashoffset="59.5" transform="translate(2772)" opacity=".85"/><use xlink:href="#a" stroke-dashoffset="59.4" transform="translate(2808)" opacity=".9"/><use xlink:href="#a" stroke-dashoffset="59.34" transform="translate(2844)" opacity=".95"/><use xlink:href="#a" stroke-dashoffset="59.32" transform="translate(2880)"/></g></defs><use xlink:href="#b" stroke="#4285f4"/><use xlink:href="#c" stroke="#db4437"/><use xlink:href="#b" stroke="#db4437" transform="translate(2916)"/><use xlink:href="#c" stroke="#f4b400" transform="translate(2916)"/><use xlink:href="#b" stroke="#f4b400" transform="translate(5832)"/><use xlink:href="#c" stroke="#0f9d58" transform="translate(5832)"/><use xlink:href="#b" stroke="#0f9d58" transform="translate(8748)"/><use xlink:href="#c" stroke="#4285f4" transform="translate(8748)"/></svg>
</div>