Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Progress Bar Uplift

See original GitHub issue

Issue Description

As an engineer, I want to enhance progress bar to have the gradient color. Jira: https://jira2.cerner.com/browse/CWELL-16429 Here’s a screenshot from the visual https://wiki.ucern.com/pages/viewpage.action?spaceKey=UserExperience&title=Wellness+Q1-Q2+2018&preview=/1644477772/1705682454/Q1-Action-Plan-10.pdf

Issue Type

New Feature
Enhancement
Bug
Other

Expected Behavior

Progress bar loads with gradient with little bit of progress bar color
Fully loaded progress bars don’t have gradient

Current Behavior

Progress bar loads with no gradient

Steps to Reproduce

http://engineering.cerner.com/terra-core/#/site/progress-bar

Tech-Design

linear-gradient property can be used to display smooth transition of progress bar color.
Add linear-gradient to following classes. &::-webkit-progress-value &[value]::-moz-progress-bar
Add background: currentColor to classes &[value='100'] so fully loaded progress bars don’t show gradient.
With the changes above the progress bars show as follows

Issue Analytics

State:
Created 6 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

alex-bezekcommented, Mar 16, 2018

@us044466 I’m assuming the gradient is just theme for Consumer, so your update would want to be passive for terra-core and the current look (being solid). We can check with UX for this. So I’m assuming you could change background-color: currentColor; to instead be a background, with a css variable for the gradient, defaulting to none, and the color is still currentColor for passivity?

Also, try not to link internal things like jira or ucern on open source issues. Thanks!

0reactions

bjankordcommented, Mar 30, 2018

This has been released in terra-progress-bar@2.3.0

Top Results From Across the Web

Charts & Progress Bars - Uplift - Swift Ideas

Progress Bars. Illustrator 100%. Photoshop 80%. After Effects 70%. Branding Skills 10/10. Digital Strategy Skills 9/10 ...

Split Test: Can a Progress Bar Boost Conversions 28.29%?

FLIR Systems ran a split test to determine if adding a progress bar could increase their LeadBox conversions. Vote to reveal their results!...

UPLIFT Standing Desk (V2 & V2-Commercial)

... Track progress - track the amount of time spent standing, calories burned, and number of sit/stand transitions over days, weeks, months, and...

sklift.datasets.datasets — scikit-uplift 0.4.0 documentation

Used for progress bar. Returns: string: The path to the dataset. """ if data_home is None: if dest_subdir is None: data_dir = get_data_dir()...

Progress Bar - CtrlAltFix Tech

Progress Bar. Progress Bar. Fat Line. Progress Bar. Fat With Gradient. Progress Bar. Line With Rounded. Progress Bar. Progessbar tooltip. Progress Bar.