Skip to content

feat: bgcolorEnd option for color progression as progress increases #46

@franverona

Description

@franverona

Overview

Add a bgcolorEnd option that interpolates the overlay's background color from bgcolor toward bgcolorEnd as progress increases from 0 to 100.

Proposed API

// Vanilla
Loadgo.init(el, {
  bgcolor: '#FF0000',    // red at 0%
  bgcolorEnd: '#00FF00', // green at 100%
})

// jQuery
$('#logo').loadgo({
  bgcolor: '#FF0000',
  bgcolorEnd: '#00FF00',
})

Behaviour

  • When bgcolorEnd is set, each setprogress call linearly interpolates the overlay's backgroundColor between bgcolor (at 0%) and bgcolorEnd (at 100%).
  • When bgcolorEnd is not set (default null), behaviour is unchanged — overlay color stays fixed at bgcolor.
  • Interpolation operates in RGB space on each channel independently.
  • Both hex (#RRGGBB) and rgb(r, g, b) formats should be accepted for both bgcolor and bgcolorEnd.
  • Not applicable in filter mode (no overlay exists); option is ignored in that case.

Motivation

Enables at-a-glance progress feedback through color without requiring custom CSS or an onProgress callback:

  • Red → green for success indicators
  • White → brand color for reveal effects

Notes

  • Both loadgo.js (jQuery) and loadgo-vanilla.js should be updated.
  • Composable with animated / animationDuration — the CSS transition on the overlay already covers background-color if added to the transition property list.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions