Add optional stylesheet

[sloria]

It would be convenient to ship this package with an optional stylesheet for styling a basic skeleton screen.

import { createSkeletonProvider } from 'react-skeletor';
import 'react-skeletor/css/index.css';

export default createSkeletonProvider(
   dummyData,
   (props) => props.loading,
    'react-skeletor',
)(App);

/*  react-skeletor/css/index.css */
@keyframes progress {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}
.react-skeletor {
    animation: progress 1.2s ease-in-out infinite;
    color: rgba(0, 0, 0, 0.0);
    background-color: #eee;
    background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
    background-repeat: no-repeat;
    border-radius: 4px;
}

[alex3165]

@sloria That's a good idea, we actually thought about it with @jamiecopeland when we first designed this library but we wanted something as lean as possible in the end. After a second thought it would probably make this library way simpler to use which is definitely what we want!

@jamiecopeland any thoughts?

[jamiecopeland]

@sloria Yep, you're totally right, making things as convenient as possible is best and definitely at the top of our priority list, but since everyone has different technical requirements (CSS vs CSS in JS etc) and graphic design styles I think this would be best tackled via documentation and examples. We'll work on extending what's already there with some simple copy-and-pasteable examples which should make it super easy to get started and save adding any unnecessary bulk to the existing code. Thanks for the nudge. Watch this space for updates soon!

[sloria]

Sounds like a fine approach to me.