비전공자 개발일기

Animated Progress Bar 본문

HTML _CSS

Animated Progress Bar

HiroDaegu 2023. 1. 7. 00:24
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">

<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">
    <title>ANIMATED PROGRESS BAR</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="progress-bar"></div>
</body>

</html>
:root {
    --bar-color1: #1FE576;
    --bar-color2: #D7E5DE;
    --bar-width: 200px;
    --bar-height: 20px;
    --anim-duration: 3s;
}

body {
    background-color: #B0B0B0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar {
    position: relative;
    margin-top: 25%;
    width: var(--bar-width);
    height: var(--bar-height);
    border-radius: calc(var(--bar-height) / 2);
    overflow: hidden;
    background-color: var(--bar-color2);
}

.progress-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--bar-color1);
    animation: progress var(--anim-duration) ease-out infinite;
}

@keyframes progress {
    to {
        transform: scaleX(1);
    }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Mail Button Micro-Interaction  (0) 2023.01.09
Ring Of Fire  (0) 2023.01.08
Foggy Rain Animation  (0) 2023.01.06
Dynamic Calendar  (0) 2023.01.05
3D Happy New Year  (0) 2023.01.03
'HTML _CSS' Related Articles more