0

he creado una barra de progreso pero veo que por defecto aparece en horizontal ¿Se puede cambiar la barra de progreso de jQuery UI a vertical?

3
  • Añade tu código por favor
    – G. Levano
    el 6 nov. 2017 a las 17:24
  • En sí sólo es un div con un id="progressbar" y el js le doy la propiedad de barra de progreso $('progressbar').progressbar({ Así ya se crea, y aqui dentro van valores, llegué a tener la duda de si aquí iría alguna propiedad que le dé la orientación de vertical pero no, jeje }); el 6 nov. 2017 a las 22:58
  • Una buena forma de es utilizando transform: rotate(90deg); Con esta propiedad podrás rotar la div 90 grados desde su esquina inferior izquierda. Suerte! el 4 jul. 2018 a las 17:45

1 respuesta 1

0

Existe este plugin, pero no lo he usado y no sé si pueda adaptarse a lo que ud está buscando.

También, ud podría crearlo usando HTML & CSS. Realice este demo funcional donde agregué un JqueryUi Slider control para mirar el estado del progressBar. Aquí esta el código básico (sólo para la barra)

HTML

<div class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>

CSS

.progressbar {
   width: 25px;
   height: 215px;
   position: relative;
   background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat;
}
.progressbar-value {
   position: absolute;
   display: block;
   margin: 0;
   border: 0;
   width: 15px;
   height: 200px;
   top: 7px;
   left: 5px;
   overflow: hidden;
   text-indent: -30px;
   background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center;
}
.progressbar-cover {
   position: absolute;
   display: block;
   width: 15px;
   height: 200px;
   border: 0;
   left: 0;
   bottom: 0%;
   background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0;
}

Tomado de

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.