Dancing Shapes

CSS-only, minimalist loading animations

Demo

CSS/Sass

Dancing Shapes can be used as a traditional CSS, with files available in /dist (after running build command) or through CDN. With Sass compiler, import necessary files from /sass:

// Import within /sass directory
@import './loaders/<loader_type>';

// Import from npm package in /sass directory
@import '../node_modules/dancing-shapes/sass/loaders/<loader_type>';

// Import from npm package with Webpack
@import '~dancing-shapes/sass/loaders/<loader_type>'

where <loader_type> is one of loaders e.g. bubble or fade-up

Styling settings can be overwritten, full list can be found in /sass/_settings

HTML

All loaders share the same markup structure:

  <div class="loader <loader_type>">
    <div class="partial"></div>
    <div class="partial"></div>
    <div class="partial"></div>
    <div class="partial"></div>
  </div>

where <loader_type> is one of loaders e.g. bubble or fade-up

Browser support

Depends on required browser support, you may need to use autoprefixer, which is available for all major build tools.

CDN

Thanks to unpkg.com you can include Dancing Shapes on a website directly from the npm package:

<!--Specific loader-->
<link href="https://unpkg.com/dancing-shapes@latest/dist/css/<loader_type>.css" rel="stylesheet">

<!--All loaders-->
<link href="https://unpkg.com/dancing-shapes@latest/dist/css/dancing-shapes.min.css" rel="stylesheet">

where <loader_type> is one of loaders e.g. bubble or fade-up