Neste tutorial vou mostrar como você pode adicionar uma barra de progresso nos componentes com pergunta do quiz.

Para mostrar como fazer vou usar 3 perguntas como exemplo, mas você pode fazer com quantas precisar.

A única configuração que precisa fazer no componente é de adicionar na aba de avançado um

ID - CSS Respostas personalizado.

Como este, ele será necessário porque ele vai identificar qual a etapa das perguntas se encontra. Para as perguntas seguintes basta usar pergunta2, pergunta3 e assim por diante.

Precisamos configurar o CSS personalizado em Configurações >> Customize o css

Agora o Css personalizado individual para cada uma das perguntas é este:

#pergunta1::before { 
    content: '';
    display: block;
    width: 50%;
    height: 11px;
    background-color: #f0f0f0;
    border-radius: 10px;
  	margin: 20px auto;
    margin-top: 72px !important;
    margin-bottom: -40px !important; 
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #5C40F5 33%, #f0f0f0 33%);
}

E aqui um exemplo de uso com 3 perguntas:

#pergunta1::before { 
    content: '';
    display: block;
    width: 50%;
    height: 11px;
    background-color: #f0f0f0;
    border-radius: 10px;
  	margin: 20px auto;
    margin-top: 72px !important;
    margin-bottom: -40px !important; 
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #5C40F5 33%, #f0f0f0 33%);
}

#pergunta2::before {
    content: '';
    display: block;
    width: 50%;
    height: 11px;
    background-color: #f0f0f0;
    border-radius: 10px;
  	margin: 20px auto;
    margin-top: 72px !important;
    margin-bottom: -40px !important; 
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #5C40F5 66%, #f0f0f0 66%);
}

#pergunta3::before {
    content: '';
    display: block;
    width: 50%;
    height: 11px;
    background-color: #f0f0f0;
    border-radius: 10px;
  	margin: 20px auto;
    margin-top: 72px !important;
    margin-bottom: -40px !important; 
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #5C40F5 100%, #f0f0f0 100%);
}