Trucos CSS (26) - Gráficos de progreso circulares

Trucos CSS en Github github.com/esc....
Visítanos en nuestra página web ed.team
Síguenos en Facebook : / edteamlat
Síguenos en Twitter: / edteamlat
Únete a la comunidad Escuela Digital en Facebook:
ed.team/comunidad

[@ezequielrivera9992]

Muchísimas gracias, lo implementé en un proyecto muy importante!!, saludos desde Aguascalientes México!!

[@ronnayblima]

Parabéns pelos vídeos!! Consigo compreender bem apesar de estar em espanhol e obrigado por compartilhar seu conhecimento. Me ajudou!

[@victorochoa8735]

Se me vino una idea, entraré a maraton de madrugada para practicar este video. Esta bueno.

[@erickfroylan6283]

Wow... esta es la primera vez que veo tus videos y quedé impresionado (y mira que pocas cosas me impresionan). Excelente aportación, muchas gracias. ¡Eres un capo! Saludos...

[@BrianMarriaga]

Genial Alvaro! muy bueno el vídeo. Al final fue mejor meterlo en un mixin, aunque en el proceso de optimizado yo usé @Extend para no tener que complicarme tanto xD

[@malowzin]

Lo que le sigue de bueno este video, me ha agrado demasiado. Como puedo hacer para que el skill y el percent los modifique desde javascript, ya que estos me los dara el backend (ajax y php). PD: La parte de la funcion solo se puede en sass verdad. En mi caso solo usamos css.

[@daniellosada6167]

porfinnnnn alguien que explicaa!!!!

[@manudeteruel]

Fantástico... tendré que verlo un par de veces pero queda genial....

[@camilopinzon444]

Que buen vídeo, pero tengo una pregunta, si por ejemplo esos porcentajes los obtengo desde javascript , ¿Hay alguna forma de pasárselos a css?

[@javi68yt2]

Alguna respuesta? Lo averiguaste?🤔

[@darvegac]

Eres un crack! Con ganas de probarlo en mis proyectos. Gracias Álvaro!

[@dyandrus]

Hola, están muy buenos. LA parte del Index la puedes compartir?

[@JuanVillaG]

Hola Alvaro, mismo resultado multiplicar el percent * 1.8

[@jairoverachaly6248]

alvaro....muuuy buen tutorial, bien explicado, una pregunta, ¿también se puede hacer lo mismo utilizando Jquery-UI? para ahorrar tiempo.

[@uriel_bot]

Me saco el sombrero 😅 Exelente!

[@victorlmoralesm]

buen vídeo, buenas explicaciones, me gustan los cursos que das y me gustaría que en los trucos css agregues haciendo slider-show, jumbotron seria genial

[@Adrian-ux9xm]

Yo lo hice en CSS nativo este es el código HTML: Layout CSS: * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #000000; min-height: 100vh; color: #FFFFFF; } h1 { text-align: center; font-family: verdana; margin-bottom: 3rem; } .html { --uno: #FF7700; --dos: #772200; --percentage: 95; color: var(--uno); } .css { --uno: #0081EE; --dos: #004077; --percentage: 90; color: var(--uno); } .js { --uno: #FFCE00; --dos: #995600; --percentage: 75; color: var(--uno); } .progressBar { --deg: calc(var(--percentage)/100*180deg); --result: linear-gradient(var(--deg), var(--uno) 50%, var(--dos) 50%); height: 15rem; width: 15rem; background: var(--result); margin: auto; border-radius: 50%; position: relative; font-family: verdana; font-weight: bold; } .progressBar::before { box-sizing: border-box; height: inherit; width: inherit; background: linear-gradient(#000000 50%, transparent 50%) content-box; padding: 1.75rem; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: 1; text-align: center; line-height : 10.5rem; font-size: 1.5rem; } .progressBar::after { box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 15.3rem; width: 15.3rem; background: linear-gradient(transparent 50%, #000000 50%); border-radius: 50%; padding-top: 1.5rem; position: absolute; top: -.15rem; right: -.15rem; } .html::before { content: "HTML"; } .css::before { content: "CSS"; } .js::before { content: "JavaScript"; } .html::after { content: "95%"; } .css::after { content: "90%"; } .js::after { content: "75%"; }

[@heroeexceso8605]

Buenas, no logro ver la relacion entre el HTML y el CSS.... Podrias revisarlo? Grax!

[@cccaurora]

Excelente video MAESTRAZO!

[@darkozz23]

Muy buenos los videos Alvaro, una pregunta estoy usando webstorm pero no puedo poner un lorem en jade como en sublime, hay que que configurar algo para que aparezca presionando tab como en sublime.

[@yimberospino1219]

Hola soy de Venezuela gracias por el vídeo solo una duda sera que se puede operar desde mysql y php es decir que este bajo el dominio de una etiqueta

creo que el giro de la barra de progreso se puede solucionar girando los grados del degradado solamente

[@carolinamedina7038]

que buen video

[@moi12freg]

excelente video me sirvio mucho gracias

[@enmanuelmartinez1269]

Finally a masterpiece CSS tutorial, subscribed ""

[@VhaDesign]

Por eso me gustan sus videos, enseñan muchas cosas :) buen video

[@rogeliosuleta3314]

buenas, soy nuevo en tus videos. Es posible que en vscode para los before y after se use :: y no : ?

[@keshiste]

He buscado como hacer esto en tiempo real y no lo encuentro. Asi esta muy bonito y todo pero es fijo, como podríamos hacerlo al retornar algun objeto de una api por ejemplo o de base de datos. Se ve bonito pero no se si funcional

[@GuilleSolimo]

Muy buen tutorial, me preguntaba si en lugar de usar sass uso php, puedo lograr lo mismo, no? gracias!

[@Patrick-ff9bo]

Guille Solimo lo dudo, PHP es un lenguaje de programación y Sass es un lenguaje de maquetación, que incluye algunas variables como en programación, pero luego estás se convierten en css.

[@davesolano9520]

Rajado el tutorial... gracias ♥

[@valenciapaginasweb]

Eres un monstruo!!! jjj genial

[@fernandocortez9720]

Hay forma de que se haga dinámica?

[@edgarabrahamjuarezolvera7195]

esto se puede haces condatos provenientes de una base de datos, es decir con php , mysql, JS, y html? es mi duda, de ante mano gracias.

[@itzruiz5888]

Buenos días, saludos cordiales... Quisiera preguntar si esa vista en vivo es directo desde tú editor de código y cuál sería. Actualmente uso Adobe Bracket que también posee la misma vista en vivo y actualiza sin usar tanto el comando para refrescar. ¡Gracias, saludos!

[@RodrigoMendoza7]

Utiliza un IDE llamado Web Storm

[@ushieru]

En este video Alvaro se ve jodidamente cansado, y solo puedo sentir respeto por el; tener la disciplina de no faltar con estos videos, que en su momento fueron clave.

[@AntonioDofi]

Esta algo loco esto... voy a ir por partes para comprenderlo bien...

[@sahiraranguren9697]

demasiado bueno tus videos, aunque deberias poner el codigo para descargarlo ya que no me da el resultado

[@karenmossetto]

Si de verdad quieres aprender debes hacer que funcionen

[@AntonioDofi]

La practica hace al maestro

[@arielcastillo7925]

Una pregunta por que no usas llaves? y como se llama el otro lenguaje que usar de parte del css? Tus videos me estan sirviendo demaciado Muchas gracias!!

[@AngelHdzMultimedia]

SASS es como un framework de CSS (tecnicamente es un preprocesador) que usa llaves y existe SCSS (Sassy CSS, indented syntax) que es un SASS que no usa llaves.

[@arielcastillo7925]

Oh muchas gracias, ya no estoy programando pero gracias jeje

[@ShieldVG]

Cuando no usas las llaves, eso es jade (ahora PUG me parece), que igual es un preprocesador y no las necesita.

[@AngelHdzMultimedia]

Exacto. Me enfoque contestando la 2da parte de la pregunta de ariel, la parte del CSS (SASS) que olvide mencionar que el HTML que esta usando sin tags, es JADE, y JADE no usa llaves.

[@JoseJungMin]

Woww!! Increible buen video :)

[@dannymarper1646]

Ahora mismo me doy cuente que muuuuy poco de css

[@JoseRobertoAguirrePortillo]

Al momento de agregar. no me detecta los cambios y no aparece la gráfica.

[@INFOWAU]

Hola una pregunta diseñar un pagina para un barra para controlar liquidos en lugar de la progress bar

[@f3zman]

Es la primera vez que veo tus videos y estoy muy pero muy perdido pence que era css pero no sabia que se podian poner funciones y veo tu extencion de archivos y veo que dice .jade y .scss y .css ¿me podrías indicar el nombre de tu video donde empiezas las introduccion de esas extenciones y archivos?

[@EDteam]

kzbin.info/www/bejne/rqaTnYmvp6Zrj5I kzbin.info/www/bejne/jpSvmqqribKGrdE

[@f3zman]

Gracias por responder

[@sanzinhobelo]

Boa noite, por favor, consigo o arquivo css e html desse video? No github não encontro ....

[@armani35]

Me parece genial esa barra... como se puede hacer para que el numero, por ejemplo: HTML5 86% ... valla aumentando progresivamente? ósea 1% 2% ..... 86%....

[@EDteam]

Raul Anampa ya deberías de hacerlo con Javascript

[@mam3769]

thank you man

[@cristusrock]

👍

[@quico126]

Mejor hereda el color o imagen de fondo: Background: inherit; Me falta algun parametro que alinea la imagen de fondo heredada a la imagen de fondo del padre

[@danioeritcode07]

Y como podriamos hacer que funcione en tiempo real

[@javiervalenciano60]

jejejejej una pregunta como haces para las caritas que salen en tu video de compilacion

[@paulmalpartidarojas5476]

es una aplicacion para compilar los archivos! prepros.io/ para ya no usar node!

[@danioerit2125]

a partir del &: ya no me sirve nada ¿qué debo hacer?

[@danioeritcode07]

Me pasa lo mismo

[@luisgaraundo7799]

debes sacar el before afuera, asi: .circular-progress::before{ ......} lo mismo para el after saludos

[@AndresJimenezS]

compartes en codpen ?

[@Hikki01]

+Andres Jimenez +Efrain Ramirez subió a Github puedes conseguirlo ahí, o de lo contrario hacer el ejercicio tu mismo, vamos no es muy complicado no te quita mucho tiempo.

[@AndresJimenezS]

Si tranquilo luego me di cuenta, salu

[@jpablofull]

Genial pero no me funciona el linear-gradient a que se puede deber ???? Gracias

[@josemanrique7109]

tal ves la version del navegador

[@lorenamilagrossotozenteno9932]

¿Porque el sass me marca error las variables? :,v

[@Th3Wolf69]

Hola que tal buenas, alguien que me pueda ayudar con la siguiente duda: muchas gracias y por cierto que buen video, me esta ayudando ahorita para una pagina que estoy diseñando El problema que tengo es que quiero agregar una celda mas para el ingreso de información, mi problema es que no encuentro la manera y quería ver si me podrían apoyar

[@aringenieria8818]

tengo una duda porque en el html colocas solo .circular-progress y no como una clase, a mi no me sale el circulo

[@karenmossetto]

Álvaro utiliza un framework para acortar código html, luego se compila como divs, tú debes hacer los divs normalmente.

[@f3zman]

El esta utlizando Jade y scss para poder compilar el ejercicio es un framework que acorta y hace mas eficiente el proyecto

[@diegoparionaperez7230]

me parece interesante pero El Github ya no funciona puedes arreglarlo por favor

[@nihil_um]

M-a-r-a-v-i-l-l-o-s-o.

[@sadidleonardocastillamonte5374]

envia el codigo original, porfa

[@isidroleon8782]

Solo dame el madito código.jpg

[@josephvogulys]

y el codigo? XD