Back
Reimagining Text Input with a Kaleidoscope Spinner
An exciting twist on the traditional text input, incorporating a kaleidoscope-inspired spinner to mesmerize users.
HTML
Let's create a container that will house both the text input and the kaleidoscope spinner. The spinner is comprised of small pieces that rotate like a kaleidoscope pattern to bring a sense of animation to this UI component.
<div class="kaleido-container">
<input type="text" class="kaleido-input" placeholder="Type here...">
<div class="kaleido-spinner">
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
</div>
</div>
Javascript
This component uses a simple JavaScript event listener to trigger an animation whenever the user interacts with the input field. Upon receiving input, the spinner will be activated briefly to give a visual feedback.
document.querySelector('.kaleido-input').addEventListener('input', () => {
document.querySelector('.kaleido-spinner').classList.add('active');
setTimeout(() => {
document.querySelector('.kaleido-spinner').classList.remove('active');
}, 1000);
});
CSS
The CSS for this component includes forming the kaleidoscope effect by setting all spinner pieces to align and transform, giving an illusion of rotation. Each piece is a circle transformed and rotated, giving it a mesmerizing motion each time input is entered.
.kaleido-container {
position: relative;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
.kaleido-input {
background-color: transparent;
width: 100%;
border: none;
outline: none;
font-size: 16px;
padding: 5px 10px;
}
.kaleido-spinner {
display: flex;
position: absolute;
right: 15px;
width: 20px;
height: 20px;
transition: transform 0.5s;
}
.kaleido-piece {
background-color: #ff6f61;
width: 5px;
height: 5px;
margin: 1px;
border-radius: 50%;
transform-origin: 5px 5px;
transform: rotate(45deg);
}
.kaleido-spinner.active {
transform: rotate(360deg);
}
Whole code
<div class="kaleido-container">
<input type="text" class="kaleido-input" placeholder="Type here...">
<div class="kaleido-spinner">
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
<div class="kaleido-piece"></div>
</div>
</div>
<script>
document.querySelector('.kaleido-input').addEventListener('input', () => {
document.querySelector('.kaleido-spinner').classList.add('active');
setTimeout(() => {
document.querySelector('.kaleido-spinner').classList.remove('active');
}, 1000);
});
</script>
<style>
.kaleido-container {
position: relative;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
.kaleido-input {
background-color: transparent;
width: 100%;
border: none;
outline: none;
font-size: 16px;
padding: 5px 10px;
}
.kaleido-spinner {
display: flex;
position: absolute;
right: 15px;
width: 20px;
height: 20px;
transition: transform 0.5s;
}
.kaleido-piece {
background-color: #ff6f61;
width: 5px;
height: 5px;
margin: 1px;
border-radius: 50%;
transform-origin: 5px 5px;
transform: rotate(45deg);
}
.kaleido-spinner.active {
transform: rotate(360deg);
}
</style>
Thank you for reading this article.
Comments