<div id="display3">

</div>
<button class="btn" onclick="checkData(data)"> Correct Data </button>
<button class="btn" onclick="checkData('data')"> Faulty Data </button>
<div>
<span class="spinner"> </span>
</div>



body
{
    font-family: 'Droid Sans', sans-serif;
}

#display, #display2, #display3, #console
{
    width: 300px;
    height: 200px;
    padding: 10px 10px 10px 30px;
    margin:5px;
    background-color: #A7DBD8;
    color:#222;
    line-height: 50px;
}
#display3
{
line-height: 1.3em
}
#console
{
    line-height:16px;
    height: 200px;
    width: 300px;
}
.btn {
  border:0;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin:8px;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

input[type='text']
{
border:1px solid #3498db;
height:28px;
padding:4px;
 -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  margin:8px;
}

.error{ color: red; font-weight: bold; }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.spinner
{
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
  display: inline-block;
  width:20px;
  height:20px;
  border:1px solid #111;
  margin-left:50px;
  font-size: 2em;
  visibility:hidden;
}

var userData = {
    "firstName" : "Marigold",
    "lastName" : "Peters",
    "email": "marigold@me.com"
    }

var data = JSON.stringify(userData);

function start_animation()
{

  document.getElementsByClassName('btn')[0].style.visibility='hidden';
  document.getElementsByClassName('btn')[1].style.visibility='hidden';
  document.getElementsByClassName('spinner')[0].style.visibility='visible';

}
function stop_animation()
{
  document.getElementsByClassName('btn')[0].style.visibility='visible';
  document.getElementsByClassName('btn')[1].style.visibility='visible';
  document.getElementsByClassName('spinner')[0].style.visibility='hidden';

}

function checkData(jsonData)
{
    var data;
    start_animation();
    try
    {
        data = JSON.parse(jsonData);
    }
    catch(e)
    {
        document.getElementById('display3').innerHTML = "<span class='error'> Error: </span> <br>" + e.message;
        data=null;
    }
    finally
    {
      stop_animation();
    }

    if(data != null)
    {
      var entry = "Name : " + data.firstName + " " + data.lastName + " <br> Email : " + data.email;
      document.getElementById('display3').innerHTML = entry;
    }
    return data;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.