"Search box - Icon to bar"
Bootstrap 4.1.1 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <div class="frame"> <!-- <div class="circle" data-aos="fade-up" data-aos-easing="ease-out-back"> --> <div class="circle"> <form action="#"> <input class="form-control" type="search" name="show" placeholder="Start typing + click button" aria-label="Search"></input> <div class="btn hide" type="submit" id="show"><i class="fas fa-search"></i></div> <ul class="suggestions clearfix"></ul> </form> </div> <div class="handle"></div> <div class="loading hide"> <i class="fas fa-spinner"></i> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
// delete the following line if no text is used // edit the line if you wanna use other fonts @import url('https://fonts.googleapis.com/css?family=Overlock'); // use only the available space inside the 400x400 frame body { background: #201c29 !important; } .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; background: #643a7a; box-shadow: .5rem 1rem 1rem rgba(0,0,0,0.6); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; align-items: center; } form { display: flex; } .circle { border: 3px solid white; border-radius: 50%; display: flex; width: 4rem; height: 4rem; box-shadow: .4rem .6rem .6rem rgba(0, 0, 0, .2); z-index: 2000; transition: 1s; align-items: center; justify-content: flex-start; background: #643a7a; overflow: hidden; } .expand { width: 15rem; border-radius: 0; } form { width: 15rem; } .form-control { border: none; outline: none !important; box-shadow: none !important; opacity: 0; background: transparent !important; font: { family: "overlock"; size: 1.2rem; } } .show { opacity: 1; transition: 1s; } input { outline: none; border: none !important; color: white !important; } ::placeholder { color: fade-out(white, .4) !important; } /* .start { overflow: hidden; /* Hides letters as typing effect happens white-space: nowrap; /* Keeps the content on a single line margin: 0 auto; /* Gives that scrolling effect as the typing happens animation: typing 1.8s steps(40, end); } /* The typing effect @keyframes typing { from { width: 20%; } to { width: 15rem; } } */ .btn { font-size: 125%; border-radius: 0; padding: .5rem; z-index: 1000; transition: 1s; i { color: white; } &:focus { box-shadow: none !important; } } .hide { opacity: 0; z-index: -1; } .fa-spinner { position: absolute; left: 40%; top: 30%; color: fade-out(white, .5); font-size: 2000%; animation: loading 3s ease-in-out infinite; } @keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .handle { position: absolute; top: 58%; left: 54%; background: white; box-shadow: .5rem .5rem 1rem rgba(#000, .5); width: 2rem; height: 4px; border-radius: 2px; transform: rotate(45deg); z-index: 1; transition: 1s; } .tidy { transform: translateY(-2rem) rotate(0); } form .suggestions { border: none !important; position: absolute; top: 57%; left: 20%; width: 60%; background: #fff; font-size: 13px; font-weight: 400; line-height: 20px; padding: 0 15px; margin: 0; list-style: none; color: #6E6E6E; z-index: -1; transition: 1s; box-shadow: .4rem .6rem .6rem rgba(0, 0, 0, .2); } form .suggestions li { margin: 18px 0; padding: 0; cursor: pointer; } form .suggestions li:hover { color: #741CAF; } form .suggestions li b { font-weight: 900; } .clearfix::before, .clearfix::after { content: " "; display: table; z-index: -1; } .clearfix::after { clear: both; }
// jQuery v3.3.1 is supported /* AOS.init({ duration: 1000, }) */ $(document).ready(function(){ $(".circle").click(function(){ $(this).toggleClass("expand"); $(".form-control").toggleClass("show"); $(".btn").toggleClass("hide"); $('.handle').toggleClass("tidy"); }); $('.btn').click(function() { $('.suggestions').toggleClass("hide"); $('.loading').toggleClass("hide"); }) }); $('input').keyup(function() { var $suggestions = $('.suggestions'); var text = $(this).val(); if(text.length){ $suggestions.html('').addClass('active'); $suggestions.append( $('<li />', {html: '<b>' + text + '</b>'}) ); $suggestions.append( $('<li />', {html: 'Veritatis et <b>' + text + '</b>'}) ); $suggestions.append( $('<li />', {html: 'ut aliquid ex <b>' + text + '</b> vero eos'}) ); } else { $suggestions.html('').removeClass('active'); } });

Related: See More


Questions / Comments: