JSFiddle - React, Tailwind, and code Playground

by Alexander Gräfenstein

HTML

<script src="http://cdn.ginie.eu/spritespin.js"></script>
<link rel="stylesheet" href="http://cdn.ginie.eu/bootstrap-theme.css">
<strong>Preload progress example</strong>
<div id="example"></div>

JavaScript

var frames = [
      "http://cdn.ginie.eu/images/rad_zoom_001.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_002.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_003.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_004.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_005.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_006.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_007.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_008.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_009.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_010.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_011.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_012.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_013.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_014.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_015.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_016.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_017.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_018.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_019.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_020.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_021.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_022.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_023.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_024.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_025.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_026.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_027.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_028.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_029.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_030.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_031.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_032.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_033.jpg",
      "http://cdn.ginie.eu/images/rad_zoom_034.jpg"
    ];

    $("#example").spritespin({
      width: 480,
      height: 327,

      frames: frames.length,
      behavior: "drag", // "hold"
      module: "360",
      sense: -1,
   ...