Simple and Super Easy Directional Status Line In Pure CSS | Powerline.css

A quick way to create a powerline-like effect and it’s super simple and super easy to use. Powerline.css is a CSS library to render a horizontal directional standing line that consists of a variety of objects with totally different bg colors to point hierarchy or workflow.

  • This is a quick way to create the powerline-like effect.
  • It’s super simple and super easy to use.
  • Author: @vivekascoder

How to make use of it:

1. Download and cargo the stylesheet powerline.css within the doc.


2. Add objects to the powerline.

Home Category CSSScript ~~

3. Override the default colour variables.

    --component-0-color: #bd93f9;
    --component-1-color: #8be9fd;
    --component-2-color: #6272a4;
    --component-3-color: #50fa7b;
    --component-4-color: #ffb86c;
    --component-5-color: #ff79c6;
    --component-6-color: yellow;
    --component-7-color: #ff5555;
    --component-8-color: #f8f8f2;
    --component-9-color: royalblue;

Directional Statusline In Pure CSS, Powerline CSS Github

See Demo And Download

Official Website(vivekascoder): Click Here

This superior jQuery/javascript plugin is developed by vivekascoder. For extra Advanced Usage, please go to the official website.