Progress Load Spinners

Progress bar, Loader, and Spinner are big part of user Interactions. Here we are again prepared for every situation. Sometimes contain/data loading slowly, Sometimes users need to know the system working or not, Somewhere we need to user focus boldly. We are covering few things for loading contain.

Basically, we divide this interaction by 3 parts..

Progress Bar:

Basic progress bar

usally we can use dom/tag progress for the progress and jds-radius-l, jds-radius-m, jds-radius-s for make rounded edge.

70%

Progressbar Large jds-progressbar progressbar-contain progressbar-lg jds-radius-l progressbar-warning

70%

Progressbar Medium jds-progressbar progressbar-contain progressbar-md jds-radius-m progressbar-warning

70%

Progressbar Small jds-progressbar progressbar-contain progressbar-s jds-radius-m progressbar-warning

70%

Progressbar Extra Small jds-progressbar progressbar-contain progressbar-sm jds-radius-xs progressbar-warning

70%

Progressbar Extra Extra Small jds-progressbar progressbar-contain progressbar-xxs jds-radius-xxs progressbar-warning

70% 

     70%

Custom progress bar

usally we can use the jds-progressbar for calling JDS progressbar style. Some others class we can use for the customization design, Like:- progressbar-contain, progressbar-primary, progressbar-success, progressbar-warning, progressbar-gray, progressbar-error, progressbar-tertiary, progressbar-foreground, progressbar-background

Also we can set cross bar in JDS progressbar style. Here we need to set more one more CSS class, Like:- progressbar-crossbar

Progress bar data goes here!
Progress bar Primary!
Progress bar Success!
Progress bar Warning!
Progress bar Gray!
Progress bar Error!
Progress bar Tertiary!
Progress bar Foreground!
Progress bar Background!
Cross Bar
Steps (jds-steps)

First we need to use a class jds-steps as a parent. Then we can set CSS Class step in child. You need to set some other classes for made done and active step like:- is-done, is-active.

We can also set size using class steps-s, steps-m, steps-l

  • 1
  • 2
  • 3
  • 4
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    •
  • 1

    Feature One

  • 2

    Feature Done

  • 3

    Active

  • 4

    Not Done

    
    
  • 
        
    1
    
        
    Feature One
    
    
    • 
    
  • 
        
    2
    
        
    Feature Done
    
    
    • 
    
  • 
        
    3
    
        
    Active
    
    
    • 
    
  • 
        
    4
    
        
    Not Done
    
    
    •

Loader:

You need to set some class for making those Interactions

First we neet to use a class jds-skeleton as a perent. Then can set CSS Class skeleton-placeholder in child. You can set any other dome or class inside jds-skeleton dom.

Skeleton List Example

Table Example

Breakpoint Syntax Description

Blankslate Example

 

July Design System

What is design thinking and why should you care?

We live in an era of experiences, be they services or products, and we've come to have high expectations for these experiences. They are becoming more complex in nature as information and technology continues to evolve. With each evolution comes a new set of unmet needs. While design thinking is simply an approach to problem solving, it increases the probability of success and breakthrough innovation.

Find More

Codeview

You need to set some class for making those Interactions

First we neet to use a class jds-tiles as a perent. Then can set CSS Class tile-placeholder in child. You can set any other dome or class inside jds-tiles dom.

Tiles Example

 

This is a Box and Card Vertical
Card Media

Use it to provide information when no dynamic content exists. Use provide info.

Spinner:

Liquid Loader Example

Spiner Loader Example

Bumping Loader Example