Step progress bar

Pure css candy

Step Progress CSS

La progress bar est particulièrement adaptée lors d’une inscription multi-step, un tunnel d’achat pour une commande en ligne ou un tracking de livraison de colis.

Par simplicité, lisibilité et modernité, j’utiliserai la syntaxe slim. Elle est facilement transposable en HTML pur. La technique ci-dessous permet d’appliquer sur l’ensemble de la progression, un dégradé permettant de favoriser le concept de “En cours de progression”.

Markup HTML (slim)

1
2
3
4
.content
  div Etape 1
  div Etape 2
  div Etape 3

.content est une div où la class .content est appliquée. En Slim, la balise div est implicite. Il s’agit du container des trois step. La version HTML donne :

1
2
3
4
5
<div class="content">
  <div>Etape 1</div>
  <div>Etape 2</div>
  <div>Etape 3</div>
</div>

Ci-dessous sont présentés les 3 états, ou l’avancement des step.

1
2
3
4
5
6
/Première étape
.content
  .current Etape 1
  /Etape actuelle où est positionné l'utilisateur
  div Etape 2
  div Etape 3
1
2
3
4
5
6
7
/Deuxième étape
.content
  .completed Etape 1
  /Etape completée par l'utilisateur
  .current Etape 2
  /Etape actuelle où est positionné l'utilisateur
  div Etape 3
1
2
3
4
5
/Troisième et dernière étape
.content
  .completed Etape 1
  .completed Etape 2
  .current Etape 1

.current permet d’appliquer le style sur l’étape en cours, tandis que .completed, permet de styler la div sur une étape complétée et donc passée.

SCSS pour la structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.content {
    margin: 20px 0;
    &:before, &:after {
        content: " ";
        display: table;
        // clearfix
    }
    div {
        position: relative;
        float: left;
        width: 33%;
        box-sizing: border-box;
        // à retirer si vous appliquez * { box-sizing: border-box; }
        // en amont sur votre style
    }
    .current { width: 34%; }
}

Le résultat non stylé :

Step Progress CSS structure

Adaptez les couleurs à votre guise, ou les propriétés non préfixées pour les browsers à des soucis de compatibilité (Préférez l’utilisation d’Autoprefixer)

SCSS pour le style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.content {
    background: linear-gradient(90deg, #24c6dc 0%, #514a9d 100%);
    font-family: sans-serif;
    div {
        background: #f0f0f0;
        padding: 12px 0 12px 12px;
        color: #888888;
        text-align: center;
        font-size: 1em;
        &:after {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            width: 0;
            height: 0;
            border-top: 24px inset transparent;
            border-bottom: 20px inset transparent;
            border-left: 24px solid transparent;
            content: "";
            // Créé le biseautage en fin de div d'une étape
        }
        &.current:last-child:after { border: 0; }
    }
    .current {
        color: #666666;
        font-weight: bold;
        &:after {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            width: 0;
            height: 0;
            border-top: 24px solid #f0f0f0;
            border-right: 20px solid #f0f0f0;
            content: "";
            // Créé le biseautage en fin de div d'une étape en prenant la couleur
            // de fond de l'étape suivante
        }
    }
    .completed {
        color: transparentize(#474747, 0.8);
        // fonction Sass pour modifier l'opacité via rgba d'une couleur
    }
    .current, .completed { background: transparent; }
}

La propriété background: transparent; sur .current et .completed permet de réveler le dégrader de couleur de .content

Step Progress CSS style

Ou modifier selon votre style

1
2
3
4
5
6
7
8
9
10
11
.content .current:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 21px solid #f0f0f0; // Rajoute la bordure d'effet "flèche"
    border-top: 21px solid #f0f0f0;
    border-right: 0px solid #f0f0f0;
}

Step Progress CSS style arrow