How to do this timeline

[Alberto]

Hi, I need to show a timeline of where and when is a paqage.
The number of lines is variable, max 8
But the problem I see is the blue image
Any hint?
Thanks

[osquiabro]

tengo algo similar pero horizontal, usó una variable tipo text con el atributo Allow xHTML y luego por código llenó la variable, ejemplo:

 CLEAR(Loc:Pg)
    p_web.ssv('Loc:Pg','')
    CASE Bil3:BillofLadingStatus
    OF 'P'       
        Loc:Pg = (p_web.AsciiToUTF('<<ol class="progtrckr if-large" data-progtrckr-steps="5"><13,10>'&|
            '    <<li class="progtrckr-done">IN-TRANSIT TO US TERMINAL<</li><13,10>'&|
            '    <<li class="progtrckr-todo">RECEIVED AT US TERMINAL<</li><13,10>'&|
            '    <<li class="progtrckr-todo">CONTAINER UNLOADED<</li><13,10>'&|
            '    <<li class="progtrckr-todo">IN-TRANSIT<</li><13,10>'&|
            '    <<li class="progtrckr-todo">DELIVERED<</li><13,10>'&|
            '<</ol><13,10>'))
      OF 'W'       
        Loc:Pg = (p_web.AsciiToUTF('<<ol class="progtrckr if-large" data-progtrckr-steps="5"><13,10>'&|
            '    <<li class="progtrckr-done">IN-TRANSIT TO US TERMINAL<</li><13,10>'&|
            '    <<li class="progtrckr-done">RECEIVED AT US TERMINAL<</li><13,10>'&|
            '    <<li class="progtrckr-todo">CONTAINER UNLOADED<</li><13,10>'&|
            '    <<li class="progtrckr-todo">IN-TRANSIT<</li><13,10>'&|
            '    <<li class="progtrckr-todo">DELIVERED<</li><13,10>'&|
            '<</ol><13,10>'))     
    END

[Jane]

Very nice! 

Care to show the CSS?

[Alberto]

Genial, y como se ve en un celular?
Esta gente lo quiere vertical x eso.

[Rene Simons]

Guys,
In English please.
We all want to learn.
Cheers,
Rene

[Jane]

Ah.  Found code similar to Osquiabro's on Stack Overflow.
Also found a vertical example there, Alberto.

I'll attach both of them to this.

Rene - Alberto asked how Osquiabro's would look on a phone.  His client is asking for vertical status bar.

Jane

[Alberto]

Thanks Jane, its working...

[osquiabro]

hi Jane sorry for delay this is the css and michelis this is not compatible for mobile is a very old solutions but when have a time i modified for responsive:

ol.progtrckr {
        display: table;
        list-style-type: none;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        width: 100%;
    }
    ol.progtrckr li {
        display: table-cell;
        text-align: center;
        line-height: 3em;
    }

    ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
    ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
    ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
    ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
    ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
    ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
    ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
    ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

    ol.progtrckr li.progtrckr-done {
        color: black;
        border-bottom: 4px solid yellowgreen;
    }
    ol.progtrckr li.progtrckr-todo {
        color: silver;
        border-bottom: 4px solid silver;
    }

    ol.progtrckr li:after {
        content: "\00a0\00a0";
    }
    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }
    ol.progtrckr li.progtrckr-done:before {
        content: "\2713";
        color: white;
        background-color: yellowgreen;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }
    ol.progtrckr li.progtrckr-todo:before {
        content: "\039F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

[osquiabro]

michelis look this sample is very clean and easy to understand

https://codepen.io/erwinquita/pen/ZWzVRE?editors=1100