Old Browser-Support

[riede]

With v2 you use Custom Properties (CSS Variables) to set the size and the color. Using Custom Properties does not work with old browsers (e.g. IE11). Please support old Browser by defining a default value - something like this:

/* Config */
:root {
  --sk-size: 40px;
  --sk-color: #333;
}

/*  Plane */
.sk-plane {
  width: 40px;
  height: 40px;
  background-color: #333;
  width: var(--sk-size);
  height: var(--sk-size);
  background-color: var(--sk-color);
  animation: sk-plane 1.2s infinite ease-in-out; 
}

The IE11 will ignore the lines where the the Custom Field is set and uses the predefined values. Using var(value, default-value); does not work.

An easy way to prevent repetitions is using SCSS and the SCSS variables (see: #150):

$sk-size: 40px !default;
$sk-color: #333 !default;

/* Config */
:root {
  --sk-size: $sk-size;
  --sk-color: $sk-color;
}

/*  Plane */
.sk-plane {
  width:$sk-size;
  height: $sk-size;
  background-color: $sk-color;
  width: var(--sk-size);
  height: var(--sk-size);
  background-color: var(--sk-color);
  animation: sk-plane 1.2s infinite ease-in-out; 
}

[tobiasahlin]

👍 I'll get on this