diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks.js b/packages/plugins/blocks/blocks-loaders/src/blocks.js
index f58c1358f..38c1ad444 100644
--- a/packages/plugins/blocks/blocks-loaders/src/blocks.js
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks.js
@@ -15,6 +15,7 @@
*/
export { default as IconSpinner } from './blocks/IconSpinner/IconSpinner.js';
+export { default as ProgressBar } from './blocks/ProgressBar/ProgressBar.js';
export { default as Skeleton } from './blocks/Skeleton/Skeleton.js';
export { default as SkeletonAvatar } from './blocks/SkeletonAvatar/SkeletonAvatar.js';
export { default as SkeletonButton } from './blocks/SkeletonButton/SkeletonButton.js';
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js
new file mode 100644
index 000000000..91a9b6a3e
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js
@@ -0,0 +1,62 @@
+/*
+ Copyright 2020-2021 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React, { forwardRef } from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+const ProgressBar = ({ blockId, methods, style, properties, content }) => {
+ const {
+ progress = 30,
+ height = 3,
+ // color = 'red', // TODO: get primary from theme ??
+ transitionTime = 1000,
+ // loaderSpeed = 500,
+ // waitingTime = 1000,
+ shadow = true,
+ } = properties;
+
+ return (
+ <>
+
+ {content.content && content.content()}
+
+ );
+};
+
+ProgressBar.defaultProps = blockDefaultProps;
+ProgressBar.meta = {
+ category: 'container',
+ loading: false,
+ icons: [],
+ styles: ['blocks/ProgressBar/style.less'],
+};
+
+export default forwardRef(ProgressBar);
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.test.js b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.test.js
new file mode 100644
index 000000000..8e858fb21
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.test.js
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020-2021 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
+
+import Block from './ProgressBar.js';
+import examples from './examples.yaml';
+import schema from './schema.json';
+
+const testConfig = {
+ validation: true,
+ required: true,
+ values: [],
+};
+
+runRenderTests({ Block, examples, schema, testConfig });
+runBlockSchemaTests({ examples, schema });
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/__snapshots__/Skeleton.test.js.snap b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/__snapshots__/Skeleton.test.js.snap
new file mode 100644
index 000000000..9f1d3bb97
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/__snapshots__/Skeleton.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render default - value[0] 1`] = `
+
+`;
+
+exports[`Render required = true default - value[0] 1`] = `
+
+`;
+
+exports[`Render required = true sizedefault - value[0] 1`] = `
+
+`;
+
+exports[`Render required = true sizesmall - value[0] 1`] = `
+
+`;
+
+exports[`Render sizedefault - value[0] 1`] = `
+
+`;
+
+exports[`Render sizesmall - value[0] 1`] = `
+
+`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema sizedefault 1`] = `true`;
+
+exports[`Test Schema sizedefault 2`] = `null`;
+
+exports[`Test Schema sizesmall 1`] = `true`;
+
+exports[`Test Schema sizesmall 2`] = `null`;
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/examples.yaml b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/examples.yaml
new file mode 100644
index 000000000..22d3ea2a0
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/examples.yaml
@@ -0,0 +1,16 @@
+# Copyright 2020-2021 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+# http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- id: default
+ type: ProgressBar
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/schema.json b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/schema.json
new file mode 100644
index 000000000..03424fa0b
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/schema.json
@@ -0,0 +1,29 @@
+{
+ "type": "object",
+ "properties": {
+ "type": "object",
+ "additionalProperties": false,
+ "properties": {
+ "style": {
+ "type": "object",
+ "description": "Css style object to apply to the skeleton.",
+ "docs": {
+ "displayType": "yaml"
+ }
+ },
+ "height": {
+ "type": ["number", "string"],
+ "description": "Height of the skeleton."
+ },
+ "width": {
+ "type": ["number", "string"],
+ "description": "Width of the skeleton."
+ }
+ }
+ },
+ "events": {
+ "type": "object",
+ "additionalProperties": false,
+ "properties": {}
+ }
+}
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/style.less b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/style.less
new file mode 100644
index 000000000..29b389d0b
--- /dev/null
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/style.less
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020-2021 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.progress-bar-loader {
+ height: 100%;
+ width: var(--progress); // initial 0%
+ background: @primary-color; // TODO: test if this works
+ transition: var(--transition);
+ opacity: var(--opacity);
+}
+
+.progress-bar-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: var(--height);
+ z-index: 99999999999;
+ width: 100%;
+}
+
+.progress-bar-shadow {
+ box-shadow: 0 0 10px @primary-color, 0 0 10px @primary-color;
+ width: 20px;
+ opacity: 1;
+ position: absolute;
+ height: 100%;
+ transition: var(--transition);
+ transform: rotate(3deg) translate(0px, -4px);
+ left: calc(var(--progress) - 20px); // initial -10rem
+}
diff --git a/packages/plugins/blocks/blocks-loaders/src/blocks/Spinner/style.less b/packages/plugins/blocks/blocks-loaders/src/blocks/Spinner/style.less
index 01babdd96..92ce21bc4 100644
--- a/packages/plugins/blocks/blocks-loaders/src/blocks/Spinner/style.less
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/Spinner/style.less
@@ -13,5 +13,3 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-
-@import '../LogoSpinner/style.less';