Item: command line
Rating: 3.4
Author: -dhaval-

2 Downloads
72 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>command line</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/ymjkge.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<body>
  <div class="container">
    <div class="cmd">
      <p class="first"><span>$Robot~&nbsp;</span><span class="init"></span><span class="perc"></span><span class="cursor curact"></span></p>
      <p class="second"><span class="load_cmpt"></span><span class="cursor"></span></p>
      <p class="third"><span class="type_cmds"></span><span class="cursor"></span></p>
    </div>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-dhaval-/command-line-yMJKgE */
body{
    background-color:#ccc;
}
.container{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
}
.cmd{
  background-color:#111;
  border-radius:5px;
  padding:20px;
  
  width:600px;
  height:200px;
}
p{
  letter-spacing:2px;
  white-space: nowrap;
  overflow: hidden;
  font-family:courier;
  color:lime;
}
::-moz-selection{
    background:transparent;
  }
::selection{
    background:transparent;
  }
.cursor {
  height:15px;
  width:10px;
  margin-left:2px;
  margin-bottom:-4px;
  background-color:lime;
  -webkit-animation: blink 1s infinite;
          animation: blink 1s infinite;
  display:none;
}
.curact{
  display:inline-block;
}

@-webkit-keyframes blink {
   0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes blink {
   0%   { opacity: 0; }
  100% { opacity: 1; }
}


/*Downloaded from https://www.codeseek.co/-dhaval-/command-line-yMJKgE */
//variables declarations
var time=0;//time as  program goes
var n = 0;//for initializings
var pFirst = $('.first .cursor');//first para
var pSecond = $('.second .cursor');//second para
var pThird = $('.third .cursor');//third para

//function for typing effect
function type(target, toType, stepTime){
  var chars = Array.from(toType);
  setInterval(function(){
     $(target).append(chars[n]);
     n++; 
  },stepTime);
  //time setting
  time = time + (toType.length * stepTime);
};
//typing time setting
function timeout(typeFunc){
  setTimeout(typeFunc,time);
};

//function of replacing cursors
function repCuract(source,dest){
  $(source).remClass('curact');
  if(typeof dest != 'undefined'){
    $(dest).addClass('curact');
  }
};

//initialization
var initText = "initializing";
var initStep = 100;
var init = type('.first .init',initText,initStep);
timeout(init);
//percentage--
var percStep = 10;
function percLoading(){
  setInterval(function(){
    if(n<=100){
      $('.perc').text("("+n+"%)");
      n++;
    }
  },percStep);
};
setTimeout(percLoading,time);
//-------------
 //time stetting
      time = time + percStep*100;
//load complete
var loadTxt = "Loading Complete..";
var loadStep = 60;
var load = type('.second .load_cmpt', loadTxt, loadStep);
typeAp(load);