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

In our video today, you'll learn how to create a measure with HTML and CSS code to add a conditionally formatted animated border to any image on your Power BI dashboard.
I'll show you step by step in a detailed and easy-to-understand way so that you can apply this incredible technique to your own projects. Stay tuned and start creating even more incredible dashboards with this personalized measure!
I'm sure you'll love the content. So don't waste any time and check it out now! 👍
-----------------------------------------------------------------------
Link to the Dashboards course in Power Bi : dadoscriativos.com/dashscriat...
-----------------------------------------------------------------------
Recommended Videos:
►Learn the advanced technique to create dynamic and impactful data labels
• [POWER BI] Aprenda a t...
How to insert VARIATION ARROW in a NATIVE Power Bi chart
• Como inserir SETA DE V...
► New Card with GAUGE - Like you've never seen before
• Como criar um INDICADO...
► Learn how to break lines in data labels with DAX
• Aprenda a quebrar linh...
► Explore the power of DAX: Convert native Matrix visuals into an Interactive Calendar!
• Explore o poder do DAX...
Change the way you create cards in Power BI forever
• [Power Bi] Mude para s...
► How to create a PROFESSIONAL Layout for your Dashboard in Power BI with figma
• Como criar um Layout P...
--------------------------------------------------------------------------
Social Media
► Instagram: / dadoscriativos_
► Linkedin: / jeffersonallvesneves
► Facebook: / jefferson-alves-dados-...
-----------------------------------------------------------------------
Download the files
Telegram group: 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

[@JeffersonAlvesDadosCriativos]

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
th-cam.com/video/qMsRmwuCTQw/w-d-xo.html
► Como inserir SETA DE VARIAÇÃO em gráfico NATIVO do Power Bi
th-cam.com/video/MuqS6Pw5rx4/w-d-xo.html
► Novo Card com GAUGE - Como você NUNCA VIU
th-cam.com/video/90ZKJa13a0k/w-d-xo.html
► Aprenda a quebrar linhas nos rótulos de dados com DAX
th-cam.com/video/K62mfhR8hF0/w-d-xo.html
► Explore o poder do DAX: Converta visual nativo de Matriz em um Calendário Interativo!
th-cam.com/video/KalwfL6NypI/w-d-xo.html
► Mude para sempre a forma de criar cartões no Power BI
th-cam.com/video/gtMp3qRvzgk/w-d-xo.html
► Como criar um Layout PROFISSIONAL para o seu Dashboard no Power BI com figma
th-cam.com/video/4ySrz0QcXO4/w-d-xo.html
--------------------------------------------------------------------------
Jefferson Alves - Dados Criativos
► Inscreva-se no canal: th-cam.com/users/JeffersonAlvesDadosCriativos
► 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

[@matheusfernando8603]

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

[@alexfernandesdatabi]

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 🙂🙏

[@davidmartinezdasilva]

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!

[@Tiago_Cruzx]

Muito bom!!! Parabéns!

[@JeffersonAlvesDadosCriativos]

Muitíssimo obrigado pelo feedback Tiago

[@alimdul1672]

Está aula deveria ter 10 milhões de likes

[@leopedragon]

Muito bom. Parabéns pelo conteúdo.

[@Madsonandrady]

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

[@analiseideal]

Você é diferenciado Jefferson. Obrigado 🫂

[@danilosoares6375]

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

[@fabriciocruz5273]

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

[@sharlesroberto2990]

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

[@profBorges10]

Fantástico sua aula como sempre.

[@edinasouza1598]

Como sempre maravilhoso seu vídeo!

[@JeffersonAlvesDadosCriativos]

Obrigado Edina pelo feedback e apoio de sempre.

[@edinasouza1598]

Adoro suas aulas! Parabéns.

[@JeffersonAlvesDadosCriativos]

Valeu Edina, obrigado pela participação constante no canal.

[@elcioeff]

Há tempos que sou seu fã! Show!

[@JeffersonAlvesDadosCriativos]

Obrigado Elcio, é sempre muito gratificante receber este tipo de comentário, isso mostra que tem sido útil o conteúdo que venho compartilhando com vocês.

[@angelohenriquefonseca1811]

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!

[@JeffersonAlvesDadosCriativos]

Opa Ângelo, muito obrigado pelo feedback e por acompanhar o canal.
O velocímetro como é algo bem mais avançado no momento tenho aula somente no meu treinamento explicando o passo a passo, porém, vou buscar gravar uma aula para o canal.

[@emersonleite3107]

Trabalho incrível Jefferson. Obrigado por compartilhar.

[@JeffersonAlvesDadosCriativos]

Valeu Emerson. É sempre um prazer compartilhar conhecimento com a comunidade.

[@giovannatozzatti1606]

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

[@JeffersonAlvesDadosCriativos]

Que Top Gio, fico feliz de ter contribuído.

[@leucianesantos9341]

Jefferson, vc é monstro demais. top top

[@JeffersonAlvesDadosCriativos]

Leuciane, muito obrigado pelo feedback, fico feliz que tenha gostado da aula.

[@alexandrebueno6958]

Top de mais!!

[@JeffersonAlvesDadosCriativos]

Obrigado pelo feedback positivo e participação Alexandre

[@user-mq2vz5yh6g]

Fantástico

[@JeffersonAlvesDadosCriativos]

Valeu Ale pelo feedback e apoio de sempre man.

[@anthonygiancarlozunigavalq5164]

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 ??

[@alexsobreira291]

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

[@JeffersonAlvesDadosCriativos]

Fala Alex, muito obrigado pelo feedback meu amigo, fico feliz que tenha gostado.
Esse Velocímetro infelizmente não tem na loja da Microsoft, é um visual customizado que ensino a criá-lo do zero no meu treinamento.

[@rodrigodesousa7160]

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 👏👏👏

[@JeffersonAlvesDadosCriativos]

Parabéns Rodrigo por ter conseguido. Ja anotei a sua dica para gravar um vídeo sobre

[@rodrigodesousa7160]

@@JeffersonAlvesDadosCriativos este visual não funciona no link de publicação

[@JeffersonAlvesDadosCriativos]

@@rodrigodesousa7160 funciona sim. Se para vc nao estiver funcionando, vc precisa ir nas configurações de admin, e autorizar a exibição de visuais nao certificados.

[@rodrigodesousa7160]

@@JeffersonAlvesDadosCriativos show deu certo 👏 Obrigado

[@fabianadocinho2317]

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

[@JeffersonAlvesDadosCriativos]

Olá Fabi, muito obrigado pelo feedback. Este é um dos visuais customizados que ensino no meu treinamento.

[@SoundMusicAmerica]

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

[@JeffersonAlvesDadosCriativos]

Fala Fernando tudo bem ? Obrigado pelo feedback, fico feliz que tenha gostado meu amigo. Disponibilizei o pbix com a medida somente para os alunos do treinamento.
Para quem não é aluno, foi o motivo de eu fazer passo a passo explicando cada linha do código, para que possam acompanhar e replicar.

[@oricchannel2811]

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.

[@JeffersonAlvesDadosCriativos]

Fico feliz que o conteúdo tenha lhe ajudado. Muito obrigado pelo comentário.
Excelente pergunta meu amigo, é possível sim.
Na propriedade animation você retira o "INFINITE" e acrescenta a quantidade de loop que você deseja com o "TERATION-COUNT", como abaixo:
animation: girar 1.5s linear;
animation-iteration-count: 3;

[@LauraOliveiraFreitas]

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

[@JeffersonAlvesDadosCriativos]

Laura obrigado pela inscrição e acompanhar o canal. No momento o Velocímetro é um conteúdo exclusivo somente para os alunos do meu treinamento. Mas vou pensar em algo para trazer para o Canal.

[@LauraOliveiraFreitas]

Justo, se puder trazer algo próximo, apenas a ideia , sem o nível de detalhes já seria fantastico!

[@JeffersonAlvesDadosCriativos]

@@LauraOliveiraFreitas com certeza vou providenciar algo a respeito

[@favalone]

foda

[@JeffersonAlvesDadosCriativos]

Muito obrigado pelo feedback @Favalone

[@profBorges10]

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

[@BrunoBastos10]

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

[@hobbitlima7396]

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

[@JeffersonAlvesDadosCriativos]

Hobbit não tem, é um conteúdo exclusivo somente para os alunos do meu treinamento.

[@profBorges10]

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

[@saymonsantos8008]

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?

[@analiseideal]

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.

[@edsonfilhoadm]

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.

[@JeffersonAlvesDadosCriativos]

Obrigado pelo feedback Edson, fico feliz que tenha gostado do conteúdo.
Foi utilizado o Visual de Matriz Nativo para criação do calendário.

[@alcimar07]

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

[@datanerd6935]

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!

[@JeffersonAlvesDadosCriativos]

Hello Data Nerd,
I've just added English subtitles to this video.

[@philipedesouzasantos1201]

Salve mestre o/

[@JeffersonAlvesDadosCriativos]

Salve Philipe, opa foi rápido hein Mano.

[@philipedesouzasantos1201]

​@@JeffersonAlvesDadosCriativos Eu tô sempre por aqui! Só não tenho o hábito de comentar 🤭

[@JeffersonAlvesDadosCriativos]

@@philipedesouzasantos1201 😂😂😂😂,

[@user-wg6go4zb1f]

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

[@Rodrigo84RR]

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

[@JeffersonAlvesDadosCriativos]

Esse calendário somente no meu treinamento.
Mas no canal, tem aula ensinando a fazer um calendário similar a este, segue o link
th-cam.com/video/KalwfL6NypI/w-d-xo.html

[@joca3250]

Alguem conseguiu. Aqui nao deu certo.

[@JeffersonAlvesDadosCriativos]

Fala man, blza ? Varias pessoas conseguiram. Verifica direitinho qual o erro que esta sendo apresentado, assim fica mais fácil ajudar.

[@vitorcasciano9420]

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?

[@vitorwerneck3691]

Muito bom, parabéns!

[@JeffersonAlvesDadosCriativos]

Obrigado Vitor pelo feedback.