JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha Touch 2 - SliderExtended Example (Simple)</title>
<link rel="stylesheet" href="http://logiksoftware.com/misc/touch-2.1.1/resources/css/sencha-touch.css" type="text/css" />
<link rel="stylesheet" href="http://cdn1.geektantra.com/projects/Sencha-Touch-2-SliderExtended/examples/simple/../../SliderFieldExtended.css" type="text/css" />
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
}
#appLoadingIndicator {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -50px;
width: 100px;
height: 20px;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
float: left;
height: 20px;
margin-left: 11px;
width: 20px;
-webkit-animation-name: appLoadingIndicator;
-webkit-border-radius: 13px;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity: 0.3
}
#appLoadingIndicator > :nth-child(1) {
-webkit-animation-delay: 0.18s;
}
#appLoadingIndicator > :nth-child(2) {
-webkit-animation-delay: 0.42s;
}
#appLoadingIndicator > :nth-child(3) {
-webkit-animation-delay: 0.54s;
}
@-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.3
}
50% {
opacity: 1;
background-color:#1985D0
}
...