QuizUp Loading Icon

index.html

<div class="container">
  <div class="circle">
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
  </div>
</div>

QuizUp-Loading-Icon.markdown

QuizUp Loading Icon

I've recently started playing QuizUp and i love the design of the whole app but the first thing I said when I saw it was "I want to make that loading icon" So this is my attempt at doing so. :)

(still a bit buggy because of problems I ran into with animating the box shadow so sometimes it animates other times it doesnt, if anyone has a fix that would be great! otherwise please enjoy and leave feedback.)

A Pen by Lewis Wright on CodePen.

License.

script.js

var RandomColor = function() {
    colors = ['#1abc9c', '#2ecc71', '#9b59b6', '#34495e', '#16a085', "#27ae60", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c"];
    return colors[Math.floor(Math.random()*colors.length)];
};
  

setInterval(function() {
   $(".circle").toggleClass("two").css('color', RandomColor); 
}, 1000);

style.css

body {
  background: #222;
}

.container {
  height:475px;
  width: 475px;
  
    position: absolute;
  top: 50%;
  left: 50%;

  margin: -232.5px 0 0 -232.5px;
}

.circle {
  background: #E74C3C;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  margin: auto;
  transition:
      box-shadow 0.5s ease-in,
      color 0.3s 0.1s ease-in;
}

.two {
  box-shadow: inset 0 0 0 450px;
}

.triangle-one {
  display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 250px 150px;
border-color: transparent transparent #fff transparent;
  position: relative;
  top: 20px;
  left: 80px;
}

.triangle-two {
  display: inline-block;
  width: 0;
height: 0;
border-style: solid;
border-width: 250px 150px 0 0;
border-color: #FFF transparent transparent transparent;
  position: relative;
  top: 180px;
  left: 76px;
}