Comment Box using Javascript

Image

Real time example

Inspect the HTML

<!DOCTYPE html>
<html>
<style>
body{
font-family:verdana;}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:black;
    opacity:0.5;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#mybtn{
    width: 100px;
    height: 40px;
    background-color: rgb(39, 26, 97);
    color: white;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
textarea#textarea {
 height: 120px;
 border: 3px solid #cccccc;
 padding: 5px;
 font-family: Tahoma, sans-serif;
    width:90%;
}
</style>
<body>
<div id="preloader" style="display:none;">
  <div id="loader"></div>
</div>
<center>
    <textarea name="styled-textarea" id="textarea" onfocus="this.value='';setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter your comment here..."></textarea>
<br>
    <button onclick="timeinterval()" id="mybtn">Post</button>
</center>

</div>

function myLoader(){
document.getElementById("preloader").style.display="block";
}

function myLoadernone() {
document.getElementById("preloader").style.display="none";
}

Kumar Lakshmanan

Comment box using Javascript

Image

Real time example

Inspect the HTML

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Seven Spinner Animations Using Font-icons

Disco Lights Animation using CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Comment box using Javascript

Image

Real time example

Inspect the HTML

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Seven Spinner Animations Using Font-icons

Disco Lights Animation using CSS

Total Pageviews

Contact Form

Footer Menu Widget