Evo Image

Pure CSS Spinners

CSS3 Logo

Let's make some CSS3 loading spinners! First, let's construct the HTML:

            
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">

<div class="main">
  <h1>Pure CSS Spinners</h1>
  <ul>
    <li>
      <button id="one">
        1
      </button>
    </li>
    <li>
      <button id="two">
        2
      </button>      
    </li>
    <li>
      <button id="three">
        3
      </button>      
    </li>
  </ul>
</div>
            
          

And now the CSS:

            
/* Basic Styles */
.main {
  text-align: center;
}

h1 {
  font-family: 'Gugi', sans-serif;
  font-size: 3em;
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
}

li {
  list-style: none;
}

button {
  font-family: 'Gugi', sans-serif;
  font-size: 1.75em;
  margin: 60px;
}

/* Spinner 1 */
.spinner-1:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 50%;
  border: 3px solid lightgray;
  border-top-color: coral;
  animation: spinner 0.7s linear infinite;
}

/* Spinner 2 */
.spinner-2:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: coral;
  border-bottom-color: coral;
  animation: spinner 0.7s ease infinite;
}

/* Spinner 3 */
.spinner-3:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 50%;
  border-top: 2px solid coral;
  border-right: 2px solid transparent;
  animation: spinner 0.7s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
            
          

And a bit of jQuery:

            
$("#one").on("click", () => {
  $(".main").hide();
  $("body").addClass("spinner-1");
  if ($(this).data('clicked', true)) {
    setTimeout(() => {
      $(".main").show();
      $("body").removeClass("spinner-1");
    }, 4000);
  }
});

$("#two").on("click", () => {
  $(".main").hide();
  $("body").addClass("spinner-2");
  if ($(this).data('clicked', true)) {
    setTimeout(() => {
      $(".main").show();
      $("body").removeClass("spinner-2");
    }, 4000);
  }
});

$("#three").on("click", () => {
  $(".main").hide();
  $("body").addClass("spinner-3");
  if ($(this).data('clicked', true)) {
    setTimeout(() => {
      $(".main").show();
      $("body").removeClass("spinner-3");
    }, 4000);
  }
});
            
          

And we're done! If the code was written correctly, you should see something like this:

See the Pen Pure CSS Spinners by Matthew Conrad (@matthew-conrad) on CodePen.

Google Honors Eminent Mathematician

Google Doodle Gauss

In its long-running series of Doodles which aim to honor notable historical figures whose achievements benefit mankind, Google has today elected to honor the birthday of 19th century mathematician, Carl Friedrich Gauss (Doodle pictured above).

Carl Friedrich Gauss is often referred to, by other mathematicians, as the Prince of Mathematics and the greatest mathematician since antiquity. There is somewhat of an inside joke in mathematics circles when faced with compelling work by a fellow mathematician. To say that "He's no Gauss" may sound like an insult, but in reality even being compared to the work of Gauss would be considered a remarkable achievement.

Gauss was a childhood prodigy. By the age of 12, he was already criticizing Euclid's geometry. Many regard his crowning achievement to be his famous proof of the fundamental theorem of algebra; Gauss is often given credit for providing the first correct proof in his 1799 doctoral dissertation. Simply put, the fundamental theorem of algebra is the statement that every nonconstant polynomial with complex coefficients has a root in the complex plane.

Quantum Computing: Future Practical Applications

Abstract Digital Art

Some say that we may begin to see practical applications of quantum computing within the next five years. Let's look at some fundamental concepts behind quantum computing and why it could change our world as we know it.

What is the idea behind quantum computing?

Quantum computing is essentially harnessing and exploiting the amazing laws of quantum mechanics to process information. A traditional computer uses long strings of bits which encode either a zero or a one. A quantum computer, on the other hand, uses quantum bits, or qubits. What's the difference? Well a qubit is a quantum system that encodes the zero and the one into two distinguishable quantum states. But, because qubits behave quantumly, we can capitalize on the phenomena of superposition and entanglement.”


What can a quantum computer do that a classical computer can't?

Factoring large numbers, for starters. Multiplying two large numbers is easy for any computer. But calculating the factors of a very large (say, 500-digit) number, on the other hand, is considered impossible for any classical computer. In 1994, a mathematician from the Massachusetts Institute of Technology (MIT) Peter Shor, who was working at AT&T at the time, unveiled that if a fully working quantum computer was available, it could factor large numbers easily.


...the difficulty of factoring big numbers is the basis for much of our present day cryptography. It’s based on math problems that are too tough to solve. RSA encryption, the method used to encrypt your credit card number when you’re shopping online, relies completely on the factoring problem. The website you want to purchase from gives you a large "public" key (which anyone can access) to encode your credit card information.


This key actually is the product of two very large prime numbers, known only to the seller. The only way anyone could intercept your information is to know those two prime numbers that multiply to create the key. Since factoring is very hard, no eavesdropper will be able to access your credit card number and your bank account is safe. Unless, that is, somebody has built a quantum computer and is running Peter Shor's algorithm!”