Code CSS Animasi Progress Bar Full Otomatis

Berikut ini merupakan kode memuat sebuah halaman

Tampilan:

Code:

<style>
.loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f1f1f1;
}

.loading-text {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin-bottom: 10px;
animation: loading-text 1.5s infinite;
}

@keyframes loading-text {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.loading-bar {
position: relative;
width: 200px;
height: 4px;
background-color: #ccc;
overflow: hidden;
}

.loading-bar-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background-color: #333;
animation: load 2s linear infinite;
}

@keyframes load {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}
}
</style>

<div class="loading">
<div class="loading-text">Tunggu sebentar</div>
<div class="loading-bar">
<div class="loading-bar-inner"></div>
</div>
</div>

Alternatif #2

Tampilan:

Code:

<style>
.loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f1f1f1;
}

.loading-text {
font-family: Arial, sans-serif;
font-size: 16px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.loading-box {
position: relative;
width: 300px;
height: 30px;
background-color: #ccc;
overflow: hidden;
}

.loading-box-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
animation: load 2s linear infinite;
}

@keyframes load {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}
}
</style>

<div class="loading">
<div class="loading-box">
<div class="loading-box-inner"></div>
<div class="loading-text">Tunggu sebentar</div>
</div>
</div>

[Bug] Gedebug

Pencarian

Minggu, 30 Juni 2024

Code CSS Animasi Progress Bar Full Otomatis

Alternatif #2

Label