Structure HTML de la barre de progression animée CSS

1,405 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Structure HTML de la barre de progression animée CSS

Recommandé

22 April 2025

Un code par hanyhelmy119

21 October 2024

Effets du menu déroulant

27 May 2025

Un code par fragolahack

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #242734;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #272822;
    color: #F8F8F2;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.6;
    max-height: 50%;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.brace          { color: #F8F8F2; }
.comment        { color: #75715E; }
.function       { color: #A6E22E; }

.animation-container {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 50%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.bar {
    width: 100%;
    background-color: #546E7A;
    height: 3px;
    border-radius: 5px;
    position: relative;
}

.progress {
    height: 4px;
    background-color: #F8F8F2;
    width: 99%;
    left: 1px;
    position: absolute;
    top: 100%;
    border-radius: 5px;
    animation: sat_loading 1.2s linear infinite;

}

@keyframes sat_loading {
    0% {
       
        width: 0%; 
    }
    99% {
        width: 99%;
    }
    100% {
       width: 0%; 
    }
}

.figure {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: sat_hop 2s infinite alternate;

}