<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');
}
});
