Author: | Developer-Zahid |
---|---|
Views Total: | 1,057 views |
Official Page: | Go to website |
Last Update: | November 2, 2021 |
License: | MIT |
Preview:

Description:
A vertical timeline component with an animated gradient progress bar, built with pure CSS/CSS3.
How to use it:
1. Code the HTML for the timeline & progress bar.
<section class="timeline"> <div class="container"> <div class="timeline__wrapper"> <div class="timeline__progressbar"></div> <div class="timeline__block"> <div class="timeline__block__bullet-point"> <span class="timeline__block__circle"></span> </div> <div class="timeline__block__head"> <h1 class="timeline__block__title">January 2020</h1> </div> <div class="timeline__block__body"> <p class="timeline__block__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio nihil id animi et ipsum itaque veniam minima aliquid ad expedita.</p> <p class="timeline__block__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio nihil id animi et ipsum itaque veniam minima aliquid ad expedita.</p> </div> </div> <div class="timeline__block"> <div class="timeline__block__bullet-point"> <span class="timeline__block__circle"></span> </div> <div class="timeline__block__head"> <h1 class="timeline__block__title">February 2020</h1> </div> <div class="timeline__block__body"> <p class="timeline__block__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio nihil id animi et ipsum itaque veniam minima aliquid ad expedita.</p> <p class="timeline__block__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio nihil id animi et ipsum itaque veniam minima aliquid ad expedita.</p> </div> </div> ... <div class="timeline__hider"></div> </div> </div> </section>
2. The necessary CSS styles.
.timeline { position: relative; } .timeline__progressbar { --width: 2px; --left: -moz-calc(((15vw / 2) + 15px) - (var(--width) / 2)); --left: calc(((15vw / 2) + 15px) - (var(--width) / 2)); position: absolute; left: var(--left); width: var(--width); height: 100%; background-color: #2c2c2c; z-index: -1; } .timeline__progressbar::after { content: ""; position: fixed; top: 0; left: var(--left); width: var(--width); height: 50vh; background: -webkit-gradient(linear, left top, left bottom, from(#b25d46), color-stop(#a74141), color-stop(#743879), to(#4a3ca0)); background: -webkit-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0); background: -moz-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0); background: -o-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0); background: linear-gradient(#b25d46, #a74141, #743879, #4a3ca0); } @media screen and (min-width: 800px) { .timeline__progressbar { --width: 3px; --left: -moz-calc(50% - (var(--width) / 2)); --left: calc(50% - (var(--width) / 2)); } } .timeline__block { display: -ms-grid; display: grid; -ms-grid-columns: 15vw 1fr; grid-template-columns: 15vw 1fr; padding-top: 2.5rem; padding-bottom: 2.5rem; -webkit-box-align: start; -webkit-align-items: start; -moz-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (min-width: 800px) { .timeline__block { -ms-grid-columns: 1fr 15vh 1fr; grid-template-columns: 1fr 15vh 1fr; } } @media screen and (min-width: 800px) { .timeline__block__head { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; text-align: right; position: -webkit-sticky; position: sticky; top: 50vh; } } .timeline__block__body { grid-column: 2 / -1; } @media screen and (min-width: 800px) { .timeline__block__body { grid-column: 3 / -1; } } .timeline__block__bullet-point { position: -webkit-sticky; position: sticky; top: 50vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 800px) { .timeline__block__bullet-point { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; } } .timeline__block__circle { display: inline-block; width: 2rem; height: 2rem; border: 4px solid #0b0b0b; background-color: #ffffff; border-radius: 50%; } .timeline__block__title { font-size: 3rem; } @media screen and (max-width: 799px) { .timeline__block__title { margin-top: -1.5rem; margin-bottom: 2rem; } } @media screen and (min-width: 800px) { .timeline__block__title { line-height: 0; } } .timeline__block__text { font-size: 1.6rem; } @media screen and (min-width: 500px) { .timeline__block__text { font-size: 1.8rem; } } .timeline__hider { position: -webkit-sticky; position: sticky; bottom: -2px; width: 100%; height: 50vh; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#0b0b0b)); background: -webkit-linear-gradient(transparent, #0b0b0b); background: -moz-linear-gradient(transparent, #0b0b0b); background: -o-linear-gradient(transparent, #0b0b0b); background: linear-gradient(transparent, #0b0b0b); pointer-events: none; }