DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Loading Switched Buttons - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Loading Switched Buttons
rohitwushu
Jan 02, 2026
20
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="card"> <div class="loader"> <p>loading</p> <div class="words"> <span class="word">buttons</span> <span class="word">forms</span> <span class="word">switches</span> <span class="word">cards</span> <span class="word">buttons</span> </div> </div> </div>
1
/* From Uiverse.io by kennyotsu */ .card { /* color used to softly clip top and bottom of the .words container */ --bg-color: #111; background-color: var(--bg-color); padding: 1rem 2rem; border-radius: 1.25rem; display:flex; align-items:center; justify-content:center margin: 50px 0; } .loader { color: rgb(124, 124, 124); font-family: "Poppins", sans-serif; font-weight: 500; font-size: 25px; -webkit-box-sizing: content-box; box-sizing: content-box; height: 40px; padding: 10px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 8px; } .words { overflow: hidden; position: relative; } .words::after { content: ""; position: absolute; inset: 0; background: linear-gradient( var(--bg-color) 10%, transparent 30%, transparent 70%, var(--bg-color) 90% ); z-index: 20; } .word { display: block; height: 100%; padding-left: 6px; color: #956afa; animation: spin_4991 4s infinite; } @keyframes spin_4991 { 10% { -webkit-transform: translateY(-102%); transform: translateY(-102%); } 25% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 35% { -webkit-transform: translateY(-202%); transform: translateY(-202%); } 50% { -webkit-transform: translateY(-200%); transform: translateY(-200%); } 60% { -webkit-transform: translateY(-302%); transform: translateY(-302%); } 75% { -webkit-transform: translateY(-300%); transform: translateY(-300%); } 85% { -webkit-transform: translateY(-402%); transform: translateY(-402%); } 100% { -webkit-transform: translateY(-400%); transform: translateY(-400%); } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!