HTML
            


            
PUG
            
p 1. En JS, ajuster la variable css --main-animation-duration en fonction du temps de réponse estimé
p 2. Pour lancer l'animation, ajouter la classe ".start-animation" sur la div ".loader-version2"
p 3. Quand la tâche est terminée, remplacer la classe ".start-animation" par ".end-animation"
button.chip(onClick='getVarCss("20s")' type='button')
  span Change value duration 4s to 20s
button.chip#id-btn(onClick='startAnimation()' type='button')
  span Start animation
button.chip(onClick='endAnimation()' type='button')
  span End animation

.documentation-space

div(tabindex='-1').loader-version2
  p.sr-only Chargement en cours...
  .row
    .col-sm-6.mx-auto
      img.img-fluid(src=fakeimg+'/48x48/')
      .mod-heading
        p.heading.type6
          strong Lorem 
          | ipsum (h1/h2/h3/p)
        p.subtitle Sous-titre
      .progress
        div
          div
            div
      p.wait.percent
        span Merci de patienter quelques instants...
        span.animation-percent
          span 0%

.documentation-space

div(tabindex='-1').loader-version2.with-details
  p.sr-only Chargement en cours...
  .row
    .col-md-10.mx-auto
      .row
        .col-md-6
          img.img-fluid(src=fakeimg+'/358x358/')
        .col-md-6
          .mod-heading
            .heading.type6
              h2
                strong Lorem 
                | ipsum (h1/h2/h3/p)
            p.subtitle Sous-titre
          p.text Un email de confirmation vient de vous être envoyé, il contient les informations récapitulative de votre souscription.
          .progress
            div
              div
                div
          p.wait.percent
            span Merci de patienter quelques instants...
            span.animation-percent
              span 0%

.documentation-space

div(tabindex='-1').loader-version2.with-details.small-img
  p.sr-only Chargement en cours...
  .row
    .col-md-10.mx-auto
      .row
        .col-md-3
          img.img-fluid(src=fakeimg+'/96x96/')
        .col-md-9
          .mod-heading
            .heading.type6
              h2
                strong Lorem 
                | ipsum (h1/h2/h3/p)
            p.subtitle Sous-titre
          p.text Un email de confirmation vient de vous être envoyé, il contient les informations récapitulative de votre souscription.
          .progress
            div
              div
                div
          p.wait.percent
            span Merci de patienter quelques instants...
            span.animation-percent
              span 0%