Animated Skills Bar in HTML & CSS | Progress Bar

Sunny Heer — Sat, 22 Feb 2025 13:28:09 +0000

Source Code the following HTML CSS for an Animated Skills Bar

<!DOCTYPE html>
<!-- Coding By Trendslr - https://www.trendslr.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">

   <title>Animated Skills Bar</title>
</head>
<body>
    <div class="container">
        <div class="skill-box">
            <span class="title">HTML</span>
            <div class="skill-bar">
                <span class="skill-per html">
                    <span class="tooltip">90%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">CSS</span>
            <div class="skill-bar">
                <span class="skill-per css">
                    <span class="tooltip">70%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">JavaScript</span>
            <div class="skill-bar">
                <span class="skill-per javascript">
                    <span class="tooltip">50%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">NodeJS</span>
            <div class="skill-bar">
                <span class="skill-per nodejs">
                    <span class="tooltip">30%</span>
                </span>
            </div>
        </div>
    </div>

</body>
</html>

/* ===== Google Font Import - Poppins ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ height: 100vh; display: flex; background: #4070f4; align-items: center; justify-content: center; } .container{ position: relative; max-width: 500px; width: 100%; background: #fff; margin: 0 15px; padding: 10px 20px; border-radius: 7px; } .container .skill-box{ width: 100%; margin: 25px 0; } .skill-box .title{ display: block; font-size: 14px; font-weight: 600; color: #333; } .skill-box .skill-bar{ height: 8px; width: 100%; border-radius: 6px; margin-top: 6px; background: rgba(0,0,0,0.1); } .skill-bar .skill-per{ position: relative; display: block; height: 100%; width: 90%; border-radius: 6px; background: #4070f4; animation: progress 0.4s ease-in-out forwards; opacity: 0; } .skill-per.css{ width: 70%; animation-delay: 0.1s; } .skill-per.javascript{ width: 50%; animation-delay: 0.2s; } .skill-per.nodejs{ width: 30%; animation-delay: 0.3s; } @keyframes progress { 0%{ width: 0; opacity: 1; } 100%{ opacity: 1; } } .skill-per .tooltip{ position: absolute; right: -14px; top: -28px; font-size: 9px; font-weight: 500; color: #fff; padding: 2px 6px; border-radius: 3px; background: #4070f4; z-index: 1; } .tooltip::before{ content: ''; position: absolute; left: 50%; bottom: -2px; height: 10px; width: 10px; z-index: -1; background-color: #4070f4; transform: translateX(-50%) rotate(45deg); }`

Create a Chatbot with HTML CSS and JavaScript

Sunny Heer — Sat, 22 Feb 2025 13:22:10 +0000

Write Html Code

`<!DOCTYPE html>

Chatbot | The Coding Hubs

Chatbot | Trendslr
×

Send

Build By Trendslr © 2024

Write CSS code

body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.chat-header a{
text-decoration:none;
color: white;
}

.copyright{
font-size:12px;
text-align: center;
}

.copyright a {
text-decoration:none;
color: #343c41;
}

chatbot-toggle-btn {

position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 15px;
border: none;
background-color: #1087FF;
color: #fff;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1001; /* Ensure the button is above the chatbot popup */

}

chatbot-toggle-btn:hover {

background-color: #0074CC;

}

.chatbot-popup {
display: none;
position: fixed;
bottom: 90px;
right: 20px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 350px;
max-width: 90%;
z-index: 1000;
}

.chat-header {
background-color: #1087FF;
color: #fff;
padding: 15px 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}

close-btn {

background-color: transparent;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;

}

.chat-box {
max-height: 350px;
overflow-y: auto;
padding: 15px 20px;
}

.chat-input {
display: flex;
align-items: center;
padding: 10px 20px;
border-top: 1px solid #ddd;
}

user-input {

font-family: "Poppins";
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 12px;
outline: none;

}

send-btn {

font-family: "Poppins", sans-serif;
padding: 10px 20px;
border: none;
background-color: #1087FF;
color: #fff;
border-radius: 12px;
margin-left: 10px;
cursor: pointer;
transition: background-color 0.3s ease;

}

send-btn:hover {

background-color: #0074CC;

}

.user-message {
background-color: #f3f3f3;
color: #333;
padding: 14px;
border-radius: 15px;
margin-bottom: 15px;
margin-top: 15px;
margin-left: 10px; /* Push user message to the left /
position: relative;
display: flex;
align-items: center;
flex-direction: row-reverse; / Move user message to the right */
}

.user-message::before {
content: "\1F468"; /* Man emoji */
position: absolute;
bottom: -17px;
right: -20px;
margin-bottom: 7px;
font-size: 20px;
background-color: #1087FF;
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.bot-message {
background-color: #1087FF;
color: #fff;
padding: 14px;
border-radius: 15px;
margin-bottom: 10px;
margin-top: 15px;
align-self: flex-start; /* Move bot message to the left /
margin-right: 10px; / Push bot message to the right /
position: relative;
display: flex;
align-items: center;
flex-direction: column; / Adjust for button placement */
}

.bot-message::before {
content: "\1F916"; /* Robot emoji */
position: absolute;
bottom: -17px;
left: -14px;
margin-bottom: 4px;
font-size: 20px;
background-color: #1087FF;
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.button-container {
display: flex;
justify-content: space-around;
margin-top: 10px;
}

.button-container button {
padding: 10px 50px;
border: none;
background-color: #1087FF;
color: #fff;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button-container button:hover {
background-color: #0074CC;
}

Write JavaScript Code

const responses = {
"hello": "Hi there! How can I assist you today?",
"coding hubs": "Here you will get Notes, Ebooks, project source Code, Interview questions. visit Coding Hubs.Visit Website",
"how are you": "I'm just a bot, but I'm here to help you!",
"need help": "How I can help you today?",
"bye": "Goodbye! Have a great day!",
"default": "I'm sorry, I didn't understand that. Want to connect with expert?",
"expert": "Great! Please wait a moment while we connect you with an expert.",
"no": "Okay, if you change your mind just let me know!"
};

document.getElementById('chatbot-toggle-btn').addEventListener('click', toggleChatbot);
document.getElementById('close-btn').addEventListener('click', toggleChatbot);
document.getElementById('send-btn').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});

function toggleChatbot() {
const chatbotPopup = document.getElementById('chatbot-popup');
chatbotPopup.style.display = chatbotPopup.style.display === 'none' ? 'block' : 'none';
}

function sendMessage() {
const userInput = document.getElementById('user-input').value.trim();
if (userInput !== '') {
appendMessage('user', userInput);
respondToUser(userInput.toLowerCase());
document.getElementById('user-input').value = '';
}
}

function respondToUser(userInput) {
const response = responses[userInput] || responses["default"];
setTimeout(function() {
appendMessage('bot', response);
}, 500);
}

In this blog, I shared how to build a Chatbot with HTML CSS and JavaScript. I hope you enjoyed reading this blog and found the information provided on the Chatbot with HTML CSS and JavaScript helpful. if you have any questions you can ask me in the comment section

DEV Community: Sunny Heer