overall by @tonydc - Codewith.it

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

Referenze

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
idIdentifica univocamente un elemento HTML
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ES01a\\\\index.html(2)

Le meraviglie d\'Italia

I Giornali sul Web

Mare Luxus - Yachts di Lusso, Navi

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;
}