doc(css): explain state classes

README.md

@@ -18,6 +18,7 @@
     - [Disabling and enabling the plugin](#disabling-and-enabling-the-plugin)
     - [Playlist example](#playlist-example)
     - [Debugging](#debugging)
+    - [CSS state classes](#css-state-classes)
   - [Migrating from v2.1.x](#migrating-from-v21x)
   - [Constraints](#constraints)
   - [License](#license)
@@ -318,6 +319,23 @@ player.spriteThumbnails({
 }).log.level('debug');
 ```
 
+### CSS state classes
+
+The plugin uses two CSS classes on the player element to signal the current state of plugin:
+
+class name | plugin state
+---------- | ------------
+`vjs-sprite-thumbnails` | plugin is/not loaded
+`vjs-thumbnails-ready` | plugin is/not ready to show thumbnails
+
+This allows for CSS directives which apply to player elements depending on plugin state:
+
+```css
+.video-js.vjs-thumbnails-ready .vjs-progress-holder {
+  background-color: green;
+}
+```
+
 <h2 id="migrating-from-v21x">Migrating from v2.1.x</h2>
 
 Plugin version 2.2.0 introduces the *mandatory* option [`columns`](#columns). Thumbnail images are now [loaded on demand](https://github.com/phloxic/videojs-sprite-thumbnails/issues/56)  which interferes less with video playback. Please apply the option to your existing setups.