overall by @tonydc - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<br>Inserisce uno spazio vuoto tra due elementi HTML.
<ul>Usato per la creazione di liste non ordinate.
classDefinisce una o più classi per elemento
typeSpecifica la tipologia/funzione di un elemento.
<q>Indica una parte di testo come citazione breve
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Web Design Final

Keep Your Emails on Target with Ma

Esercitazione Esame

Pagina Di Prova 1.11.23

Prova altro form

esercizio 3 esame

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo Pagina</title>
    <style></style>
    <script></script>
  </head>
  <body>
    
    <div class="overall-progress-bar" data-options="{&quot;counterValue&quot;:20,&quot;counterValuePersent&quot;:20,&quot;counterSeparator&quot;:&quot;&quot;,&quot;animDuration&quot;:1300,&quot;animDelay&quot;:900,&quot;loop&quot;:&quot;&quot;,&quot;loopDelay&quot;:&quot;&quot;}">
		
			<div class="overall-prbar-content elementor-clearfix"><div class="overall-prbar-title-wrap"><div class="overall-prbar-title">OVERALL</div><div class="overall-prbar-subtitle"></div></div></div>
		<div class="overall-prbar-hr-line">
			<div class="overall-prbar-hr-line-inner overall-anim-timing-ease-in-out-quad" style="width: 20%;">
				
		<div class="overall-prbar-counter">

		
						<span class="overall-prbar-counter-value">20</span>
			
						<span class="overall-prbar-counter-value-suffix">%</span>
			
		</div>

					</div>
			<div class="overall-prbar-content elementor-clearfix"></div>		</div>

		
		</div>
  </body>
</html>

.overall-prbar-content {
    text-align: center;
    overflow: hidden;
}

.overall-prbar-layout-hr-line .overall-prbar-title-wrap,{
    float: left;
}

.overall-prbar-layout-hr-line .overall-prbar-title {
    margin-bottom: 10px;
}

.overall-prbar-title {
    color: #FF0000;
    font-family: "Oswald" !important;
    font-size: 22px;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
}

.overall-prbar-subtitle, .overall-prbar-title {
    font-size: 22px;
    text-align: left;
}

.overall-prbar-hr-line {
    height: 40px;
    background-color: #4C84FF;
    border-style: none;
    border-radius: 25px 25px 25px 0px;
}

.overall-prbar-hr-line, .overall-ticker-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.overall-prbar-hr-line .overall-prbar-content, .overall-timeline-iframe-wrapper iframe, .overall-timeline-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overall-prbar-prline-rounded-yes .overall-prbar-hr-line-inner {
    border-top-right-radius: calc(25px - 1px);
    border-bottom-right-radius: calc(25px - 1px);
}

.overall-prbar-hr-line-inner, overall-prbar-vr-line-inner {
    background-color: #9BCB21;
  border-bottom-right-radius:25px;
  border-top-right-radius:25px;
}

.overall-prbar-counter{
    color: #333333;
    font-family:  "Oswald",Sans-serif;
    font-size: 40px;
    line-height: 40px;
}

.overall-prbar-counter-value-suffix {
    align-self: center;
    font-size: 26px;
    margin-left: 5px;
    line-height: 1;
    font-weight: 400px;
}

.overall-prbar-hr-line-inner {
    -webkit-transition-duration: 1.3s;
    transition-duration: 1.3s;
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.overall-prbar-content {
    text-align: center;
    overflow: hidden;
}

.overall-anim-timing-ease-in-out-quad {
    -webkit-transition-timing-function: cubic-bezier(0.455,0.030,0.515,0.955);
    -o-transition-timing-function: cubic-bezier(0.455,0.030,0.515,0.955);
    transition-timing-function: cubic-bezier(0.455,0.030,0.515,0.955);
}

.overall-prbar-hr-line-inner {
    position: relative;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    -webkit-transition-property: width;
    -o-transition-property: width;
    transition-property: width;
    overflow: hidden;
}

.overall-prbar-hr-line .overall-prbar-counter {
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overall-prbar-layout-hr-line .overall-prbar-counter{
  float:right;
}