Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Welcome to IBM Castle - $200 Loading Indicator UI Prototype

Final Submission Guidelines

IMPORTANT
- Provided UI Prototype is tested and works on mobile, tablet, desktop design screen. Do not break current functionality, look and feel.
- Let us know if you doubts about anything
- DO NOT make INDENTATION or SPACE changes. Please focus on completing F2F Tasks. We need your code easy to see the differences.

Downloadable Files
Storyboard: https://drive.google.com/folderview?id=0BxNVnWK-ZGA6UlRCSWN2MFBPS1E&usp=sharing
UI Prototype as Base: https://gitlab.com/ibm-castle/ui/tree/develop

Gitlab Usage
- Post to challenge forum if you not have access to our gitlab with your gitlab username
- First, make sure your "develop" branch ALWAYS UPDATED! We keep push some updates in parallel.
- CREATE NEW BRANCH based on our latest "develop" branch with this title format “f2f/YourTCusername/XX" where XX is number of issue ticket. And then do the fixes based on the specified branch.
- DO NOT FORK into your own repo. you MUST create from our "develop" branch. We'll reject your submission if you submit from your own repo.
- Start working your updates in that branch. Submit your updated prototype to O/R for Review and watch any feedbacks.
- Once you selected as the winner, then you'll need send MERGE REQUEST to "develop".
 
F2F TASKS
- Expected Indicator: http://codepen.io/renatocarvalho/pen/VvMNjN?editors=0110
- Just need use 3(Three) animated dots
- Reduce 50% size from that sample link
- Follow existing margin/padding
- Hex number for dots: #3f78bf
- Make sure loading indicator look proper on TABLET and MOBILE. Use your best judgement

Screenshot: Loading-Indicator/Loading_0000_Bottom Bar.jpg
- IMPORTANT!: This is sample loading placement. Refer the required above!
- Place loading indicator when user scrolling down the Message content
- After some seconds load new sets of data

Screenshot: Loading-Indicator/Loading_0001_Loading a Message.jpg
- IMPORTANT!: This is sample loading placement. Refer the required above!
- Place loading indicator navigate from one message to another
- Put loading indicator center

Screenshot: Loading-Indicator/Loading_0002_Loading Over Everything.jpg
- IMPORTANT!: This is sample loading placement. Refer the required above!
- When access Mail, Contact, Calendar or Preferences page you need display loading indicator
- There's white background overlay

CLIENT PRIORITIES (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS/HTML/CSS3 code that works in all the requested browsers.

BROWSER REQUIREMENTS
- IE11
- Safari
- Chrome
- Firefox
- Safari on Tablet
- Safari on Mobile

F2F GUIDELINES
We will review submissions as they are submitted, we will review ALL submissions until we declare a winner based on
Pay attention to Forum activity!
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted

Please let us know if you have any questions or need clarification on something

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30053942