How to create images with animated borders in Power Bi with HTML and CSS 

Neste tutorial você aprenderá a criar uma medida com código HTML e CSS para adicionar uma borda animada e formatada condicionalmente em qualquer imagem no seu dashboard do Power BI. Vou mostrar passo a passo de forma detalhada e fácil de entender para que você possa aplicar essa técnica incrível nos seus próprios projetos. Fique ligado e comece a criar dashboards ainda mais incríveis com essa medida personalizada! Tenho certeza de que vocês vão adorar o conteúdo. Então, não percam tempo e confiram agora mesmo! 👍 Um abraço a todos! ----------------------------------------------------------------------- Link do Curso Dashboards no Power Bi : dadoscriativos.com/dashscriativos/ ----------------------------------------------------------------------- Vídeos Recomendados: ►Aprenda a técnica avançada para criar rótulos de dados dinâmicos e impactantes ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qMsRmwuCTQw.html ► Como inserir SETA DE VARIAÇÃO em gráfico NATIVO do Power Bi ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MuqS6Pw5rx4.html ► Novo Card com GAUGE - Como você NUNCA VIU ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-90ZKJa13a0k.html ► Aprenda a quebrar linhas nos rótulos de dados com DAX ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-K62mfhR8hF0.html ► Explore o poder do DAX: Converta visual nativo de Matriz em um Calendário Interativo! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KalwfL6NypI.html ► Mude para sempre a forma de criar cartões no Power BI ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gtMp3qRvzgk.html ► Como criar um Layout PROFISSIONAL para o seu Dashboard no Power BI com figma ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4ySrz0QcXO4.html -------------------------------------------------------------------------- Jefferson Alves - Dados Criativos ► Inscreva-se no canal: ru-vid.com ► Ative as notificações (clica no sininho)! ► Curta o vídeo! ----------------------------------------------------------------------- Redes Sociais ► Instagram: instagram.com/dadoscriativos_/ ► Linkedin: www.linkedin.com/in/jeffersonallvesneves/ ► Facebook: facebook.com/Jefferson-Alves-Dados-Criativos-105869708409651 ----------------------------------------------------------------------- Baixe os Arquivos ► Grupo Telegram: t.me/dadoscriativos ----------------------------------------------------------------------- #powerbi #dadoscriativos #datavisualization #dataviz #storytelling #design #microsoftpowerbi #pbi #dashboard #dashboards #dashboarddesign #dashboarddesign #dataanalytics #analytics #businessinteligence #bi #dax #powerquery #microsoft #figma #html #css #svg #kpi #performance #ux #ui #uidesign #figma #deneb

Deu certo aqui, muito massa, parabéns Jefferson pela aula.

Fala Jefferson, se o conteúdo grátis já tem um valor fora do normal, imagina seu curso. Em breve serei seu aluno, obrigado por compartilhar. Deus abençoe e sucesso 🙂🙏

Muito legal, parabéns pelo conteúdo

Simplesmente o melhor do youtube em designer de gráfico. Parabéns!!!

Está aula deveria ter 10 milhões de likes

Aula perfeita, seus vídeos são incríveis em breve farei seu curso.. parabéns pela aula sempre acompanhando

Jefferson, você é sensacional. Estou desenvolvendo um dashboard para a empresa que trabalho, e teremos uma visão por representante de vendas, e eu achei essa solução sua maravilhosamente sensacional. Valeu, ganhou um inscrito!

Profissional incrível. Em nenhuma imersão eles ensinam isso. Parabéns. Topzeira amigo

Já estou utilizando!!!!! Obrigada, Jefferson!!!!

Há tempos que sou seu fã! Show!

Trabalho incrível Jefferson. Obrigado por compartilhar.

Muito bom Jefferson! Parabéns, vou aderir o seu curso, muito bom!

Jefferson, vc é monstro demais. top top

Adoro suas aulas! Parabéns.

Teu conteúdo é muito top, sou teu fã!!! em breve vou comprar o seu curso. Adoro essas animações.

Você é diferenciado Jefferson. Obrigado 🫂

Estimado Jefferson, veo todos tus tutoriales y aprendido muchas cosas, una pregunta donde puedo conseguir el Odometro que muestras en varios tutoriales. Me podrias enseñas ??

Como sempre maravilhoso seu vídeo!

Muito bom!!! Parabéns!

Consegui reproduzir o efeito 🎉 Sensacional essa aula, pena que é apenas pra uma seleção, se puder dar uma dica pra utilizar em várias fotos selecionadas, agradeço 👏👏👏

Fantástico sua aula como sempre.

Muito bom. Parabéns pelo conteúdo.

Cara a aula foi muito boa, sensacional! Se não for muito incômodo, poderia me dizer qual é o visual desse velocímetro?

Maravilha, meu amigo! Excelentes tutoriais, ainda mais pra mim, que estou ingressando no PBI. E o Velocímetro ali, vai ter tutorial tb? Rsrsrsrs... Obrigado!

Jefferson, aprendi muito com o vídeo. Parabéns pela didática e conteúdo. Apenas fiquei com uma dúvida: é possível controlar a animação de modo que a mesma dure, por exemplo, 5 voltas ao invés de deixá-la contínua? Desde já, muito grato pela atenção.

Comecei a te seguir. Seus conteúdos são muito bons. Favor explica como faz o gauge tipo velocímetro!

Amei esse velocímetro da direita muito Top. Você postou um vídeo dele?

Opa Jefferson, excelente conteúdo, meus parabéns!! Você disponibilizou o arquivo da medida em algum lugar?

Top de mais!!

Professor, excelente aula!! Tenho uma dúvida pertinente em relação ao PowerBI que procurei até em outros locais gringos mas não encontro nada relacionado a isso e é um problema de análise "simples": Os comparativos de datas são sempre realizados em períodos iguais, mas por exemplo, tenho um faturamento fechado de 4 anos: 2014, 2015, 2016 e 2017. Cada ano tem um faturamento associado, como realizo a análise de faturamento entre os anos de forma distintos e não somente em relação ao ano anterior, por exemplo: - Comparar 2015 e 2014 é "simples" (um ano anterior), mas eu quero comparar 2014 com 2016 ou 2017, ou comparar 2015 com 2017 é assim por diante, fazer comparativo abertos entre os anos, se o dado começou em 2014 como cresceu em relação a 2015, ou como 2014 cresceu em relação a 2017. Pode tirar dúvida?

Boa noite Jefferson, você disponibiliza a sua base de dados, para que as pessoas pratiquem ?

Fantástico

Hey Jeff, I want to subscribe to Dados Criativos but I don't speak Portuguese. Is there subtitles in English? And thank you for this video!

Esse calendário do lado direto foi feito com gráfico de matriz e formatado em HTML pra ficar bem organizado sim? Abraços, suas aulas são top demais.

Esse velocímetro e show, vc ensina como fazer no seu curso?

No meu caso na empresa e travado hospedar imagens em sites, tenho OneDrive e SharePoint apenas, qual sua sugestão? Obrigado

Tem algum vídeo no sue canal ensinando fazer gráfico de velocímetro?

Tenho uma dica de conteúdo. Um gráfico em HTML ou outra forma expondo porcetagem e quantidade de ocorrências (ferimentos) por parte do corpo humano.

Fala Jeferson! Existe alguma maneira, no BI, de replicar a função Index do excel? Que buscar informações com referência em linhas e colunas

quero criar uma sistema bonus de ranking para prestadores , ou seja cada pedido fechado soma 10 pontos , assim todos vão concorre conforme seu seguimento de mercado , assim todos pode ver suas colocações regional e nacional , estas pontuação zera todo ano. tem como vc fazer

foda

Tem vídeo de como vc fez esse calendário aí?

Salve mestre o/

Bom dia pessoal, alguém tem o código pronto?

Alguem conseguiu. Aqui nao deu certo.

Fala Jefferson! tudo bem? Primeiro, agradecer e parabenizar pelo conteúdo! Você é fera demais! Se puder ajudar, tb não consegui concluir a borda animada, aqui não está girando. " .card{ position: relative; width: 100vw; height: 100vw; background: #102626; display: flex; justify-content: center; align-items: center } .loader { position: absolute; width: 95%; height: 95%; background: #000; border-radius: 50% animation: girar 1.5s infinite linear } .borda_progresso { position: absolute; width: 50%; height: 100%; background: linear-gradient( #00fff9, transparent ); border-top-left-radius: 100vw; border-bottom-left-radius: 100vw; } .fundo_img { position: absolute; inset: 5vw; background: #102626; border-radius: 50% } .foto { position: absolute; width: 80%; height: 80%; border-radius: 50%; object-fit: cover; } @keyframes girar { from { transform: roate(0) } to { transform: roate(360deg) } } É preciso habilitar algo no power bi?

Muito bom, parabéns!