VSPreloader / Docs

File Structure

Within the downloaded package you'll find the structure shown in the window below. Click on the folders to discover what's inside.

VSPreloader

  • Cloud
  • Projects
  • Files
  • Photos
Name
Description
  • architecture VSPreloader's file structure
    • animations list of all the animations
      • _ada1.less first add-on animation
      • _ada2.less second add-on animation
      • ...
    • static list of all static elements
      • _ads1.less first static element
      • _ads2.less second static element
      • ...
    • _animations.less imports all the animations
    • _helpers.less list of available helpers
    • _layouts.less layout helpers for positioning the preloader
    • _mixins.less useful mixins used by VSPreloader
    • _static.less imports all the static elements
    • _variables.less configurable variables
  • vspreloader.less main less file that imports the entire architecture
  • vspreloader.min.css compiled and minified version of VSPreloader
  • vspreloader.css compiled and unminified version of VSPreloader

HTML Structure

Start by including the 'vspreloader.min.css' into the <head> of your page and once you have all VSPreloader's classes available, copy-paste the code below into your html file and start playing.

  • With comments
  • Without comments

<!-- ".preload-wrap" - positions the preloader on the page -->
<div class="preload-wrap pos-cc">
	<!-- ".preload" - positions, rotates and resizes the preloader inside the preload-wrap -->
	<div class="preload">
		<!-- ".sq-anim-1" - first square animation -->
		<div class="sq-anim-1"></div>
	</div>
</div>

<div class="preload-wrap pos-cc">
	<div class="preload">
		<div class="sq-anim-1"></div>
	</div>
</div>

Graphic Representation

The '.preload-wrap' block defines the size and position of the preloader, inside you should have a '.preload' block that can be rotated, decreased and repositioned inside the '.preload-wrap' block using the classes provided by VSPreloader. Animation classes itself can't be rotated or resized, they should use only the timing helpers and their specific helpers that will be listed lower.

Layout Helpers

List of all available helpers that you can use on '.preload-wrap' and '.preload' block are listed below. Please note that the '.preload' block can be repositioned only if it's size is decreased.

Layout type Helper Class Helper Description
.preload-wrap .pos-lt Place the preloader in the left top corner of the page
.pos-lb Place the preloader in the left bottom corner of the page
.pos-rt Place the preloader in the right top corner of the page
.pos-rb Place the preloader in the right bottom corner of the page
.pos-lc Place the preloader in the left center side of the page
.pos-ct Place the preloader in the center top side of the page
.pos-cc Place the preloader in the middle of the page
.pos-cb Place the preloader in the center bottom side of the page
.pos-rc Place the preloader in the right center side of the page
.preload .pos-lt Place the preloader in the left top corner of '.preload-wrap' block
.pos-lb Place the preloader in the left bottom corner of '.preload-wrap' block
.pos-rt Place the preloader in the right top corner of '.preload-wrap' block
.pos-rb Place the preloader in the right bottom corner of '.preload-wrap' block
.pos-lc Place the preloader in the left center side of '.preload-wrap' block
.pos-ct Place the preloader in the center top side of '.preload-wrap' block
.pos-cc Place the preloader in the middle of '.preload-wrap' block
.pos-cb Place the preloader in the center bottom side of '.preload-wrap' block
.pos-rc Place the preloader in the right center side of '.preload-wrap' block
.decr-25 Decrease preloader to 25%
.decr-50 Decrease preloader to 50%
.decr-75 Decrease preloader to 75%
.rot-45 Rotate preloader to 45 degrees
.rot-90 Rotate preloader to 90 degrees
.rot-135 Rotate preloader to 135 degrees
.rot-180 Rotate preloader to 180 degrees
.rot-225 Rotate preloader to 225 degrees
.rot-270 Rotate preloader to 270 degrees
.rot-315 Rotate preloader to 315 degrees

Animations

See what animations are available, including the helpers you can use with them.

Animation type Animation class name Animation helpers
Square animations .sq-anim-1 .round .fill
.sq-anim-2 .round .fill
.sq-anim-3 .round .fill
.sq-anim-4 .fill
.sq-anim-5 .fill
.sq-anim-6 .round .fill
.sq-anim-7 .fill
.sq-anim-8 .fill
.sq-anim-9 .round .fill
Line animations .ln-anim-1 .fill
.ln-anim-2 .fill
.ln-anim-3 .fill
.ln-anim-4 .fill
.ln-anim-5 .fill
.ln-anim-6 .fill
.ln-anim-7 .extend .fill
.ln-anim-8 .fill
.ln-anim-9 .fill
Add-on animations .ad-anim-1 .round .fill
.ad-anim-2 .round .fill
.ad-anim-3 .round .fill
.ad-anim-4 .round .fill
.ad-anim-5 .round .rotate .fill
.ad-anim-6 .round .rotate .fill
Static elements .sq-stat .full .round .fill
.ln-stat .center .fill
.an-stat .compact .extend .fill
.ad-stat-1 .round .fill
.ad-stat-2 .center .rotate .fill
.ad-stat-3 .rotate .extend .fill

Animation helpers

All the timing helpers are using the @duration variable which is configurable, you can find it by opening the 'architecture/_variables.less' file.

Helper type Helper class name Helper description
Dealy .wait-1 Animation will be delayed with @duration * 0.1 seconds
.wait-2 Animation will be delayed with @duration * 0.2 seconds
.wait-3 Animation will be delayed with @duration * 0.3 seconds
.wait-4 Animation will be delayed with @duration * 0.4 seconds
.wait-5 Animation will be delayed with @duration * 0.5 seconds
.wait-6 Animation will be delayed with @duration * 0.6 seconds
.wait-7 Animation will be delayed with @duration * 0.7 seconds
.wait-8 Animation will be delayed with @duration * 0.8 seconds
.wait-9 Animation will be delayed with @duration * 0.9 seconds
Accelerate .fast-1 Animation's duration will be reduced to @duration * 0.909 seconds
.fast-2 Animation's duration will be reduced to @duration * 0.833 seconds
.fast-3 Animation's duration will be reduced to @duration * 0.769 seconds
.fast-4 Animation's duration will be reduced to @duration * 0.714 seconds
.fast-5 Animation's duration will be reduced to @duration * 0.666 seconds
.fast-6 Animation's duration will be reduced to @duration * 0.625 seconds
.fast-7 Animation's duration will be reduced to @duration * 0.588 seconds
.fast-8 Animation's duration will be reduced to @duration * 0.555 seconds
.fast-9 Animation's duration will be reduced to @duration * 0.526 seconds
.fast-10 Animation's duration will be reduced to @duration * 0.5 seconds
Slow down .slow-1 Animation's duration will be increased to @duration / 0.909 seconds
.slow-2 Animation's duration will be increased to @duration / 0.833 seconds
.slow-3 Animation's duration will be increased to @duration / 0.769 seconds
.slow-4 Animation's duration will be increased to @duration / 0.714 seconds
.slow-5 Animation's duration will be increased to @duration / 0.666 seconds
.slow-6 Animation's duration will be increased to @duration / 0.625 seconds
.slow-7 Animation's duration will be increased to @duration / 0.588 seconds
.slow-8 Animation's duration will be increased to @duration / 0.555 seconds
.slow-9 Animation's duration will be increased to @duration / 0.526 seconds
.slow-10 Animation's duration will be increased to @duration / 0.5 seconds

Variables

Variable name Default value Description
@size 120px Size of '.preload-wrap', all the elements inside are relative to this size.
@weight 10px Preloader's line thickness.
@diff 10deg Bounce effect on rotating animations.
@duration 2s Animation duration.
@color #333 Animation color.
@acolor #03A9F4 Alternative color.
@bcolor #fff Background color used by few animations, to simulate the transparent effect.