Structure HTML de la barre de progression animée CSS

673 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Structure HTML de la barre de progression animée CSS

Recommandé

21 October 2024

Jeu de correspondance d'Halloween

20 March 2025

Bingles - Page d'accueil d'une entreprise de formation informatique

25 November 2025

Chargeur de jeu HTML5 avec intégration du SDK Yandex

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;

}

Recommandé

Jeu de correspondance d'Halloween

Bingles - Page d'accueil d'une entreprise de formation informatique

Chargeur de jeu HTML5 avec intégration du SDK Yandex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS