Struttura HTML della barra di avanzamento animata CSS

919 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Struttura HTML della barra di avanzamento animata CSS

Consigliato

13 June 2025

Un codice di Metehan

10 December 2025

Demo del gioco Flappy Bird - HTML Canvas JavaScript

25 March 2025

Un codice di andrej.social.network

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;

}

Consigliato

Un codice di Metehan

Demo del gioco Flappy Bird - HTML Canvas JavaScript

Un codice di andrej.social.network

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS